css - 如何从父级扩展 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 存储 block 名称，$e 存储元素名称。

萨斯梅斯特 demo .

.block {
  $b: &;

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

    background-color: black;

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

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

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