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

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

.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实际上是正确的，使用模块，后跟元素，然后是嵌套顺序中元素的任何修饰符，每个&都应该按原样运行。

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

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

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

Answer 2

对不起，我没有帮忙。当然你可以使用Sass和BEM方法。我只是想指出使用＆amp; __和＆amp; - 你失去了代码的可读性。

我不确定你对BEM的理解有多强，但你应该创建你的标记和类：

<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;
  }

希望有人帮忙。

SASS BEM扩展

2 个答案: