我在新网站上使用波旁威士忌、纯酒和苦味酒。我在我的网站上使用了填充组件。这非常简单，对sass和波旁威士忌来说都是新的，但我似乎不能简单地在我从Refills/componeets页面复制的现有悬停平铺模块中添加填充。
这是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>
这就是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;
}
}
}
我在我的home.scss文件中写下了这篇文章，我用于该页面：
.hover-tile-outer
padding: 100px 0
+outer-container
这不应该在顶部创建一个100px的填充吗？因为我有4个模块放在一起，它们都在互相接触，最上面的一个模块在它的正上方接触英雄模块。然而，外部容器正在工作，因为它们都排在中间，但没有填充物。我把衬垫放错地方了吗？有其他添加填充的方法吗？我对这件事很陌生，显然其他人都能理解，因为谷歌搜索这件事一点帮助都没有。
提前感谢您的帮助。
尝试添加！SCSS规则的重要标签。此外，如果你在写SCSS，你不能用+号来调用mixin，你必须写@include。
更改此项：
.hover-tile-outer
padding: 100px 0
+outer-container
对此：
.hover-tile-outer {
padding: 100px 0 !important
@include outer-container
}