问题描述:

Im using bourbon, neat, and bitters for my new site. I used a Refill Component for my site. This is very simple and im new to both sass and bourbon, but I cannot seem to simply add padding to an existing hover-tile module I copied from the Refills/Componenets page.

This is the HTML:

<div class="hover-tile-outer">

<div class="hover-tile-container">

<div class="hover-tile hover-tile-visible"></div>

<div class="hover-tile hover-tile-hidden">

<h4>Hidden Copy</h4>

<p>Lorem ipsum dolor provident eligendi fugiat ad exercitationem sit amet, consectetur adipisicing elit. Unde, provident eligendi.</p>

</div>

</div>

</div>

And this is the SCSS:

.hover-tile-outer {

$base-border-color: gainsboro !default;

$base-line-height: 1.5em !default;

$medium-screen: em(640) !default;

$hover-tile-height: 10em;

background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/i mages/mountains.png");

background-position: top;

background-size: cover;

background-color: beige;

border: 1px solid $base-border-color;

cursor: pointer;

height: $hover-tile-height;

margin-bottom: $base-line-height;

@include media($medium-screen) {

width: 40%;

}

.hover-tile-container {

height: $hover-tile-height;

overflow: hidden;

}

.hover-tile-container:hover > .hover-tile {

@include transform(translate(0, -100%));

}

.hover-tile {

@include transition(all, 0.2s ease-in-out);

background: inherit;

color: white;

height: inherit;

overflow: hidden;

padding: $base-spacing;

}

.hover-tile-hidden {

background: transparentize(#000, 0.5);

p {

color: transparentize(#fff, 0.3);

line-height: $base-line-height;

}

h4 {

margin: 0 0 0.5em 0;

}

}

}

I write this in my home.scss file that I use for the page:

.hover-tile-outer

padding: 100px 0

+outer-container

Should that not create a 100px padding on the top? because I have 4 of these modules sitting on top of each other and they are all touching each other, and the topmost one is touching the hero module right above it. However, the outer-container is working because they are all lined up in the center, but none of them have padding. Did I put the padding in the wrong place? Is there another way to add padding? I am very new to this and apperently everyone else can figure it out, because google searching for this has not helped one bit.

Thank you in advance for the help.

网友答案:

Try yo add !important tag to your SCSS rules. Also, If you are writing SCSS you can't call a mixin with the + sign' you have to write @include.

Change this:

.hover-tile-outer 
    padding: 100px 0
    +outer-container

To this:

.hover-tile-outer {
        padding: 100px 0 !important
        @include outer-container
}
相关阅读:
Top