Question

我尝试理解BEVM + SCSS哲学。

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

我想要实现的目标：

.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 Any。

.block {
  $b: &;

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

    background-color: black;

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

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

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

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

1 个答案: