親が修飾子を持つ場合、SCSS + BEMスタイルの子構造

Question

内部の要素にscssを設定できますか？私はないたく使用.box__somethingを行うが、私はあなたを理解する場合は修飾子が親にない使用する必要があります

<div class="box"> 
    <div class="box__something">Hello</div> 
</div> 
<div class="box box--rounded"> 
    <div class="box__something">Hi</div> 
</div> 

.box { 
    &__something { 
     background: blue; 
    } 
    &--rounded { 
     background: green; 

     .box__something { // <<< Is some better selector? 
      background: pink; 
     } 
    } 
} 

Answer 1

Sassには、問題を解決するための優れた組み込みソリューションはありませんが、これは何度も検討されている問題です。しかし、あなたが参加したいクラスに参加するために&ヘルパーを使用することによって、あなたが少し優雅なやり方で後の結果を達成することができます。ライブにはexample hereが含まれています。

これは仕事をしている間、あなたは我々が上&__somethingを配置している末尾&クラスでそれを使用することはできません、あなたは.box--roundedクラスのスタイルにしたい場合は、以下に示すように、直接あなたがそれ自身のクラスの中にそれを持っている必要がありますことを認識しなければなりません。

あなたは私のおしゃれな要点と一緒に遊んで、どのような結果が出てくるかを確認することをお勧めします。

.box { 
    &__something { 
     background: blue; 
    } 
    &--rounded { 
     background: green; 
    } 
    &--rounded & { 
     &__something { 
     background: pink; 
    } 
    } 
} 

この問題が解決したらうれしいです。

Answer 2

親修飾子に依存しており、子要素.box__something

Answer 3

その子供を変更する必要があります問題が正しく、私はあなたの痛みを感じる！ネストされたプロパティをネストするとすぐに、親に変更する&

ただし、このような変数として元のクラス名をキャッシュすることができます

$box: box; 

.#{$box} { 
    .#{$box}__something { 
     background: blue; 
    } 
    .#{$box}--rounded { 
     background: green; 

     .#{$box}__something { // <<< Is some better selector? 
      background: pink; 
     } 
    } 
} 

上記の方法の唯一の問題は、あなたがコンパイルしたCSSの大きなボリュームで終わるということです。あなたはそのような変数法で&を組み合わせることができ、出力の大きさを小さくするために

.box .box__something { 
    background: blue; 
} 
.box .box--rounded { 
    background: green; 
} 
.box .box--rounded .box__something { 
    background: pink; 
} 

：これはにレンダリングする方法あなた

.box__something { 
    background: blue; 
} 
.box--rounded { 
    background: green; 
} 
.box--rounded .box__something { 
    background: pink; 
} 

：

.box { 
    $box: &; 
    &__something { 
     background: blue; 
    } 
    &--rounded { 
     background: green; 

     #{$box}__something { 
      background: pink; 
     } 
    } 
} 

これはにレンダリング変数のクラス名を変更することができ、すべてが更新されます。私はそれが少し良くなると思う。