当父级有修饰符时，SCSS + BEM 样式的子级结构答案

【问题标题】：SCSS + BEM style children structure when parent has modificator当父级有修饰符时，SCSS + BEM 样式的子级结构
【发布时间】：2017-05-02 01:12:49
【问题描述】：

请问可以为 --rounded 内的元素设置 scss 吗？我不想使用 .box__something，但我需要修改依赖于父修饰符的子代

<div class="box">
    <div class="box__something">Hello</div>
</div>
<div class="box box--rounded">
    <div class="box__something">Hi</div>
</div>

.box {
    &__something {
        background: blue;
    }
    &--rounded {
        background: green;

        .box__something { // <<< Is some better selector?
            background: pink;
        }
    }
}

【问题讨论】：

标签： html css sass bem

【解决方案1】：

Sass 没有任何出色的内置解决方案来解决您的问题，这是一个已经被探索过很多次的问题。但是，您可以通过使用& 帮助器加入您希望加入的课程，以稍微不优雅的方式获得您想要的结果。我已经添加了一个直播example here。

虽然这确实有效，但您必须意识到，如果您想直接设置 .box--rounded 类的样式，则必须将它放在它自己的类中，如下所示，您不能将它与我们放置的尾随 & 类一起使用&__something 开启。

我建议你尝试一下我的 sassmeister gist，看看你能得出什么结果。

.box {
    &__something {
      background: blue;
    }
    &--rounded {
      background: green;
    }
    &--rounded & {
      &__something {
        background: pink;
    }
  }
}

我希望这已经解决了您的问题。

【讨论】：

谢谢。看起来很棒，我可以添加更多的选择器然后 __something。

【解决方案2】：

修饰符不能用在父元素上，子元素.box__something

【讨论】：

【解决方案3】：

如果我正确理解您的问题，我会感受到您的痛苦！只要您嵌套了一个嵌套属性 & 就会更改为父级。

但是，您可以像这样将原始类名缓存为变量：

$box: box;

.#{$box} {
    .#{$box}__something {
        background: blue;
    }
    .#{$box}--rounded {
        background: green;

        .#{$box}__something { // <<< Is some better selector?
            background: pink;
        }
    }
}

上述方法的唯一问题是您最终会得到大量已编译的 CSS。这呈现为：

.box .box__something {
  background: blue;
}
.box .box--rounded {
  background: green;
}
.box .box--rounded .box__something {
  background: pink;
}

要减小输出的大小，您可以将& 与变量方法结合起来，如下所示：

.box {
  $box: &;
    &__something {
        background: blue;
    }
    &--rounded {
        background: green;

        #{$box}__something {
            background: pink;
        }
    }
}

这呈现为：

.box__something {
  background: blue;
}
.box--rounded {
  background: green;
}
.box--rounded .box__something {
  background: pink;
}

这样你可以改变变量中的类名，一切都会更新，我也认为它读起来更好一些。

【讨论】：