Question

我在我的新网站上使用波本威士忌，整洁和苦味。我在我的网站上使用了补充组件。这非常简单，对于sass和bourbon来说都是新手，但我似乎无法简单地将填充添加到我从Refills / Componenets页面复制的现有hover-tile模块。

这是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个这样的模块彼此叠加而且它们都是相互接触的，最顶层的模块正在触摸它上方的英雄模块。然而，外部容器正在工作，因为它们都排列在中心，但没有一个有衬垫。我把衬垫放在错误的地方了吗？还有另一种添加填充的方法吗？我对此非常陌生，并且其他所有人都可以解决这个问题，因为谷歌搜索这个并没有帮助。

提前感谢您的帮助。

Answer 1

尝试为您的SCSS规则添加！重要标记。另外，如果您正在编写SCSS，则无法使用+符号调用mixin，您必须编写@include。

改变这个：

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

对此：

.hover-tile-outer {
        padding: 100px 0 !important
        @include outer-container
}

添加填充到悬停瓦片波旁威士忌

1 个答案:

改变这个：