html - 将填充添加到悬停瓷砖波旁威士忌

Question

我在我的新网站上使用波本威士忌、纯净和苦味酒。我为我的站点使用了 Refill 组件。这非常简单，对 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

尝试将 !important 标签添加到您的 SCSS 规则中。此外，如果您正在编写 SCSS，则不能使用 + 号调用混合，您必须编写 @include。

改变这个:

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

对此:

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