Css SASS BEM扩展

我试图将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;
        }


      }

     }

我想要这个：

.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>

呼叫

很抱歉我没有帮忙。当然，您可以将Sass与边界元法结合使用。我只是想指出，使用&_u和&--会使代码失去可读性

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

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

---

希望这有帮助。

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

.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的正确用法，您已经不必要地复制了样式，当使用

&

构建时，修改器应该真正降低一个级别。您列出的sas实际上是正确的，模块后面跟着元素，元素后面跟着嵌套顺序中的任何元素修饰符，每个

&

的行为都是正确的

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

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

---

通过这种方式，您构建的sass（使用BEM构建时更正确）将在元素上工作

这里不清楚您为什么认为可以获得所需的输出。我只希望

按钮调用--full

扩展自

按钮调用

，并具有新属性。您的代码没有显示这一点。你似乎理解extend是如何工作的，所以我不清楚我要解释什么。这不是OP所要求的。他们正在寻找一个特定的输出，这样他们就不必向元素添加多个类。我想使用嵌套的sass语法来构造我的块。但是是的，它不容易阅读和使用。。这意味着我将这样做：

。按钮调用{@extends%按钮；方框阴影：0.15em1px#388a0f，0.5em5pxrgba（0，0，0，0，0.2）；填充：5px30px；位置：相对；}按钮调用——完整的{@extends%按钮；方框阴影：0.15em1px 358a0f，0.5em5pxrgba（0，0，0.2）；填充：5px30px；位置：相对；背景：url(“../../static/images/arrow.png”）无重复96%52%1976d3；}

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