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

好老css怎么样？ :)

[class*="BLOCK__ELEMENT-"]

Answer 2

就像 Sueno 一样，您可以使用 [class*="BLOCK__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
  }  
}

Answer 3

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

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

SASS BEM 通配符

SASS BEM Wildcards

html

wildcard

sass

bem