-1

我正在尝试将 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>
4

2 回答 2

0

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

.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 构建时更正确）将适用于元素

于 2015-06-30T12:00:59.067 回答
-1

对不起，我没有帮助。当然，您可以将 Sass 与 BEM 方法结合使用。我只是想指出使用 &__ 和 &-- 你失去了代码的可读性。

我不确定你对 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;
  }

希望那个有帮助。

于 2015-06-28T17:45:43.303 回答