如何从父级扩展 scss（在 BEVM 的情况下）

Question

我试着理解 BEVM+SCSS 哲学。

在这种情况下，我不知道如何从 BE 扩展 V。

我想达到的目标：

.block {
    &__element {
        background-color: black;

        &--variation-a {
          @extend &__element; //won't work
          color: red;
        }

        &--variation-b {
          @extend &__element; //won't work
          color: green;
        }
    }
}

我想避免的事情：

.block {
    &__element {
        background-color: black;

        &--variation-a {
          @extend .block__element; //work but ugly
          color: red;
        }

        &--variation-b {
          @extend .block__element; //work but ugly
          color: green;
        }
    }
}

我发现它的唯一方法是将一种 %element { ... } 放在一边并从中扩展，但这并不是我想要的。

Answer 1

您可以使用变量。 $b 存储块名称，$e 存储元素名称。

Sassmeister demo.

.block {
  $b: &;

  &__element {
    $e: #{$b}__element;

    background-color: black;

    &--variation-a {
      @extend #{$e};
      color: red;
    }

    &--variation-b {
      @extend #{$e};
      color: green;
    }
  }
}

但是通过修饰符嵌套元素样式是不好的做法。修饰符只能覆盖样式。

如何从父级扩展 scss（在 BEVM 的情况下）

How to extend in scss from parent (in case of BEVM)

css

sass

bem