SASS BEM通配符

Question

我使用BEM (至少是它的一个修改版本)已经有一段时间了；最近我已经从编写CSS转向Sass --它似乎很好地帮助了BEM，但是我想不出如何简单地扩展它的特性。

例如，假设我有几个按钮：

<button
  class="BLOCK__ELEMENT BLOCK__ELEMENT--MODIFIER1"
>
  Click Me 1
</button>

<button
  class="BLOCK__ELEMENT BLOCK__ELEMENT--MODIFIER2"
>
  Click Me 2
</button>

<button
  class="BLOCK__ELEMENT BLOCK__ELEMENT--MODIFIER3"
>
  Click Me 3
</button>

在CSS文件中，我可以编写以下内容：

.BLOCK__ELEMENT {
  border-radius: 2rem
}

.BLOCK_ELEMENT--MODIFIER1 {
  background-color: red
}

.BLOCK_ELEMENT--MODIFIER2 {
  background-color: white
}

.BLOCK_ELEMENT--MODIFIER3 {
  background-color: blue
}

世界上所有的一切都是正确的

在Sass中，我可以将其简化如下：

.BLOCK__ELEMENT {
  border-radius: 2rem

  &--MODIFIER1 {
    background-color: red
  }

  &--MODIFIER2 {
    background-color: white
  }

  &--MODIFIER3 {
    background-color: blue
  }
}

这是一个很好的改进

，但我真正想做的是简化标记，如下所示：

<button
  class="BLOCK__ELEMENT--MODIFIER1"
>
  Click Me 1
</button>

<button
  class="BLOCK__ELEMENT--MODIFIER2"
>
  Click Me 2
</button>

<button
  class="BLOCK__ELEMENT--MODIFIER3"
>
  Click Me 3
</button>

让Sass看起来像这样：

.BLOCK__ELEMENT {

  &* {
    border-radius: 2rem
  }

  &--MODIFIER1 {
    background-color: red
  }

  &--MODIFIER2 {
    background-color: white
  }

  &--MODIFIER3 {
    background-color: blue
  }
}

在sass中有这样的通配符实现吗？

Answer 1

我有另一个可能的解决方案

@use "sass:string"

@mixin self() {
  $self: string.slice(#{&}, 2);
  
  @at-root &, [class*="#{$self}"] {
    @content
  }
}

.Block {
  @include self() {
    border-radius: 2rem;
  }

  &--modifier1 {
    background-color: red;
  }
  &--modifier2 {
    background-color: blue;
  }
  &--modifier1 {
    background-color: salmon;
  }

  &__element {
    @include self() {
      width: 50px;
    }

    &--modifier {
      background-color: skyblue;
    }

  }
}

这是以这种方式编译的

.Block, [class*=Block] {
  border-radius: 2rem;
}

.Block--modifier1 {
  background-color: red;
}
.Block--modifier2 {
  background-color: blue;
}
.Block--modifier1 {
  background-color: salmon;
}

.Block__element, [class*=Block__element] {
  width: 50px;
}

.Block__element--modifier {
  background-color: skyblue;
}

Answer 2

好的旧css怎么样？:)

[class*="BLOCK__ELEMENT-"]

Answer 3

就像Sueno一样，您可以使用class*=“块__ELEMENT-”并执行以下操作：

.BLOCK_ELEMENT {

  @at-root &, [class*="BLOCK_ELEMENT"] { // or just @at-root [class*="BLOCK_ELEMENT"]
    border-radius: 2rem;
  }

  &--MODIFIER1 {
    background-color: red
  }

  &--MODIFIER2 {
    background-color: white
  }

  &--MODIFIER3 {
    background-color: blue
  }  
}