いつもこうやっていた実装
BEMでModifierを使うとき、Elementのクラス名もhtmlに付与しないとElementのスタイルが付与されない。
htmlのclassがやたら長くなるので嫌だなーと思っていた。
.block{width:300px;margin:auto;&__element{display:inline-block;border-radius:3px;&--modifier1{background:red;}&--modifier2{background:blue;}}}書き出し後
.block{width:300px;margin:auto;}.block__element{display:inline-block;border-radius:3px;}.block__element--modifier1{background:red;}.block__element--modifier2{background:blue;}<divclass="block"><divclass="block__element block__element--modifier1"></div><divclass="block__element block__element--modifier2"></div></div>mixinで解決
mixin使って親スタイル持ってこれるようにすればできそう。
@mixinElement($blockName){&__#{$blockName}{@content;}}@mixinModifier($modifierName){$parent:&;&--#{$modifierName}{@extend#{$parent};@content;}}.block{width:300px;margin:auto;@includeElement(element){display:inline-block;@includeModifier(modifier1){background:red;}@includeModifier(modifier2){background:blue;}}}書き出し後
.block{width:300px;margin:auto;}.block__element,.block__element--modifier2,.block__element--modifier1{display:inline-block;}.block__element--modifier1{background:red;}.block__element--modifier2{background:blue;}<divclass="block"><divclass="block__element--modifier1"></div><divclass="block__element--modifier2"></div></div>cssが太りそうだけど、htmlは多少すっきりする。