SASSを使ってBEMで記述

BEMについては他のサイトでもかなり詳しく解説しているサイトがあるので、簡単にだけ説明すると、BEMというのは命名ルールの概念で、要素、子要素、状態に切り分けて命名するというのが基本です。

BEMを利用するメリットというか、BEMが出来た経緯として以下の3つがポイントとして挙げられています。

  • Fast-to-develop, long-lived projects
    (素早い開発と、長期間に渡るプロジェクトのメンテナンス)
  • Team scalability
    (チームのスケーラビリティ)
  • Code reuse
    (コードの再利用性)

皆が同じ命名規則をもってれば、メンテナンス性、スケーラビリティが上がるよねって事ですね。 会社や個人の中で各々命名規則はあると思うのですが、Web業界全体で共有できれば素敵やん。

BEM公式サイト

で、SASSでいい感じにBEMが記述できるミックスインがあったので、紹介します。

BEM用のMixin

まずはSASS3.3の機能を利用するために、現状アルファ版のSASSをインストールする必要があるので、インストールします。

gem install sass --pre

Compassを利用する場合は、現状のCompassがSass 3.3に対応していないので、これもアルファ版をインストールします。

gem install compass --pre

※現時点ではCompass 1.0.0.alpha.17がインストールされます

デザイナーのScott Kellumさんが考えたSASSミックスインがGistで公開されていたので、これを利用させてもらいます。

Sass 3.3 rc.3から#{&}での参照が出来なくなったようです。
Sass 3.3 rc3からは以下の記法なりました。

また、この変更に伴って、&の展開が@extendの参照前に行われなくなったため、&を使ってクラス名を生成したものを@extendで継承することができなくなりましたので、ご注意ください。

sass 3.3 rc3以降の場合

//Element用のミックスイン  親要素のクラス名を継承してデリミターとして"__"を付与
@mixin e($name) {
  @at-root   &__#{$name} {
    @content;
  }
}

//Modifier用のミックスイン  親要素のクラス名を継承してデリミターとして"--"を付与
@mixin m($name) {
  @at-root   &--#{$name} {
    @content;
  }
}

Sass 3.3 rc2以前の場合

//Element用のミックスイン  親要素のクラス名を継承してデリミターとして"__"を付与
@mixin e($name) {
  @at-root   #{&}__#{$name} {
    @content;
  }
}

//Modifier用のミックスイン  親要素のクラス名を継承してデリミターとして"--"を付与
@mixin m($name) {
  @at-root   #{&}--#{$name} {
    @content;
  }
}

BEMの概念としては区切り文字は–や__じゃなく、なんでも自分の好きなの使えばいいのですが、これが基本ですね。

Mixinの使用例

.block {
    color:red;
    @include e(element) {
        color:gray;
        @include m(modifier) {
            color:green;
        }
    }
    @include m(modifier) {
        color:white;
    }
}

出力結果

.block {
    color: red; 
}
.block__element {
    color: gray; 
}
.block__element--modifier {
    color: green; 
}
.block--modifier {
    color: white; 
}

便利ですね。ありがとうスコットさん。

comments powered by Disqus
« Newer Older »