sass(scss)の&と変数を利用して親の親であるセレクタを参照する - 新しい日記

sass の &(アンパサンド) はとっても便利。 特に BEM やるときは、いちいち block や element を書かずに & で書き足していけばいいのでやりやすい。 例えば以下のようなコードをコンパイルすると .block{ display: block; &__element{ display: inline-block; &--modifier{ color: #f00; } } } こうなる。 .block{display:block} .block__element{display:inline-block} .block__element--modifier{color:red} んだけど、BEM かつシングルクラス設計にすると、例えば modifier に block や element 要素のスタイルを @extend したい。 例えばさっきのコードだったら、 .b

[otiai10]

“そこで親の親の部分で、 &を変数に格納しておけば、”