親からのscssの拡張方法（BEVMの場合）

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

私は避けたいもの：

私はそれはさておき%element { ... }のようなものを持っていたし、それから延びてきた唯一の方法、それは私が欲しいものではありません。

Answer 1

変数を使用できます。ブロック名を格納するための$bと、要素名を格納するための$e。

サスマイスターdemo。

.block { 
    $b: &; 

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

    background-color: black; 

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

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

ただし、修飾子で要素スタイルをネストするのは悪い習慣です。修飾子はスタイルをオーバーライドする必要があります。