Question

我正在尝试找到一种在嵌套样式中包含父样式的方法。在下面的代码中，我想要在两个嵌套样式中包含.random-div上设置的宽度和框大小，以便.random-div--large具有width，{{1}并且box-sizing全部设定。

padding

我尝试在嵌套的内部扩展父类，但也包括所有其他嵌套样式。有没有办法只包括父样式？

Answer 1

您可以使用@extend rule而不使用占位符，只需引用要扩展的父类即可：

.random-div {
  width: 100%;
  box-sizing: border-box;

  &--large {
    @extend .random-div;
    padding: 65px 45px;
  }

  &--small {
    @extend .random-div;
    padding: 25px 15px;
  }
}

它将编译为：

.random-div, .random-div--small, .random-div--large {
  width: 100%;
  box-sizing: border-box;
}
.random-div--large {
  padding: 65px 45px;
}
.random-div--small {
  padding: 25px 15px;
}

请注意，您不能将parent selector (&)与@extend规则一起使用，因此此无效：

.random-div {
  width: 100%;
  box-sizing: border-box;

  &--large {
    @extend &;
    padding: 65px 45px;
  }

  &--small {
    @extend &;
    padding: 25px 15px;
  }
}

Answer 2

使用你的bem方法你的div应该有标识符和修饰符，看起来应该是这样的

<div class="random-div random-div--large"></div>

所以它将获得所有三种风格。

Answer 3

创建一个占位符并使用它。

<div class="searchBx">
 <div>
  <li><a href="/" class="on">somthing</a></li>
 </div>
</div>

SASS包括父样式

3 个答案: