sass 3.3.0.rc.3 から、インターポレーションなしで、「&」を含んだセレクタが作れる！！！！ - Toro_Unit
sass 3.3.0.rc.3 から、インターポレーションなしで、「&」を含んだセレクタが作れる！！！！ 先日、LessでBEMってみたらかなりさくさくコーディングできた！という話という記事で、Sassを全力でDisったような気がしますが、 いい加減にsass3.3を導入しようとついに一念発起して、sass3.3.0.rc.3を突っ込んでみました。 Compassも1.0.0の開発版にアップデートし、いざ、SassでBEMるぞ！！！と、かの有名なBEM用Mix-in @mixin e($name) { @at-root #{&}__#{$name} { @content; } } @mixin m($name) { @at-root #{&}--#{$name} { @content; } } を突っ込んでみたんですが、このMix-inでコンパイルエラー。これはrc.2にしてみたらうまくい
LessでBEMってみたらかなりさくさくコーディングできた！という話 - Toro_Unit
BEMを使ったCSSのクラス設計(MindBEMding)ですが、これをSassでやろうとすると、結構泣けてきます。 たとえばこんな感じになるんでしょうかね。 $block: ".block"; #{$block} { display: block; } #{$block}__element { border: 1px solid #CCC; } #{$block}__element_modifier { border-color: #FFF; } また、Sass 3.3以降だと、 .block { display: block; @at-root { #{&}__element { border: 1px solid #CCC; @at-root { #{&}--modifier { border-color: #FFF; } } } } //もしくはこんな感じ @at-root { #
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS Architecture with OOCSS, SMACSS, BEM
