SASS BEM 扩展

Question

我正在尝试将 bem 语法与 sass 一起使用，但我遇到了问题。

这是代码：

<button name="button" class="button button__call--full">Call</button>



    $color__primary : #23ae4b;
    $color__secondary : #1976d3;

    ////////////////////
    // Placeholder   //
    ////////////////////

    %button {
      background: #45beff;
      border: none;
      padding: 5px 8px;
      font-size: 16px;
      border-radius:3px;
      color:#fff;

      &:hover {
        opacity: 0.75;
      }
    }

    ////////////////////
    // Styling        //
    ////////////////////

    .button {
      @extend  %button;

      &__call {

        box-shadow:
        0 0.150em 1px hsl(100, 80%, 30%), 0 0.5em 5px rgba(0, 0, 0, 0.2);
        padding:5px 30px;
        position: relative;

        &--full{
          background: url("../../static/images/arrow.png") no-repeat 96% 52% $color__secondary;
        }


      }

     }

当我的 css 被编译时，我有这个：

.button__call {
    box-shadow: 0 0.15em 1px #388a0f, 0 0.5em 5px rgba(0, 0, 0, 0.2);
    padding: 5px 30px;
    position: relative; }
.button__call--full {
    background: url("../../static/images/arrow.png") no-repeat 96% 52% #1976d3; }

我想要这个:

    .button__call {
    box-shadow: 0 0.15em 1px #388a0f, 0 0.5em 5px rgba(0, 0, 0, 0.2);
    padding: 5px 30px;
    position: relative; }
.button__call--full {
            box-shadow: 0 0.15em 1px #388a0f, 0 0.5em 5px rgba(0, 0, 0, 0.2);
    padding: 5px 30px;
    position: relative;
    background: url("../../static/images/arrow.png") no-repeat 96% 52% #1976d3; }

事实上，当有修饰符时，从我的块按钮延伸，我想要所有样式、修饰符和元素。我不想这样做 :

<button name="button" class="button  button__call button__call--full">Call</button>

Answer 1

很抱歉我没有提供帮助。当然，您可以将 Sass 与 BEM 方法一起使用。我只是想指出，使用 &__ 和 &-- 你会失去代码的可读性。

我不确定您对 BEM 的理解有多深，但您应该创建自己的标记并 class 像这样：

<button name="button" class="button button--full">Call</button>

和

.button {
  box-shadow: 0 0.15em 1px #388a0f, 0 0.5em 5px rgba(0, 0, 0, 0.2);
  padding: 5px 30px;
  position: relative;
}
  .button--full {
    background: url("../../static/images/arrow.png") no-repeat 96% 52% #1976d3;
  }

希望对您有所帮助。

Answer 2

为了模拟第二个输出，您需要使用以下声明

.button {
    @extend  %button;

    &__call,
    &__call--full {
        box-shadow:
        0 0.150em 1px hsl(100, 80%, 30%), 0 0.5em 5px rgba(0, 0, 0, 0.2);
        padding:5px 30px;
        position: relative;
    }

    &__call--full {
        background: url("../../static/images/arrow.png") no-repeat 96% 52% $color__secondary;
    }
}

每次使用 & 时，它都会抓取嵌套选择器片段链，并使用它找到的位构建一个全新的顶级选择器。然后它将 sass 选择器中的任何属性添加到 css 选择器中。

但是，这并不是 BEM 的正确用法，您不必要地复制了样式，并且在使用 & 构建时，修饰符应该真正降低一个级别。您列出的 sass 实际上是正确的，模块，后跟元素，然后是嵌套顺序中元素的任何修饰符，每个 & 都按应有的方式运行。

您应该使用父项 class 和修饰符 class 以收集所有样式（默认和修改）。像这样：

<div class='button__call button__call--full'></div>

这样你构建的 sass 更正确，当使用 BEM 构建时将在元素上工作

SASS BEM 扩展

SASS BEM extends

css

sass

extends

bem