WebDesign Dackel

SassでBEMる時に便利なmixin

Hatena0
Google+0
Pocket0
Feedly0

Sass+BEMでコーディングをする際に、下記のサイトにあるようなmixinを便利に使わせてもらっていたのですが、一点不満に思う箇所があったのでちょっとだけカスタマイズしてみました。

ちなみに、この記事で書くSass3.3以降という前提で書いていきます。

まずはカスタマイズ前のコード

// Element
@mixin e($element) {
    &__#{$element} {
        @content;
    }
}

/// Modifier
@mixin m($modifier) {
    &--#{$modifier} {
        @content;
    }
}

これを次のような感じで使っていました。

.block {

  @include e(element) {
    background:#333;
    @include m(modifier1) {
      background:#555;
    }
    @include m(modifier2) {
      background:#777;
    }
  }
}

// 出力は以下
// .block__element {
//   background: #333;
// }
// 
// .block__element--modifier1 {
//   background: #555;
// }
// 
// .block__element--modifier2 {
//   background: #777;
// }

ただこれだと、次の様な不満がありました…。

複数の引数を渡せない!

複数の要素・状態で、重複したスタイルがある際に同じコードを沢山書く必要がありました。
以下では、color:#fff;が重複しています。

.block {

  @include m(modifier1) {
    color:#fff;
    background:#555;
  }

  @include m(modifier2) {
    color:#fff;
    background:#777;
  }
}

上記の例ではそもそも重複している数が少ないですが、もう少し数があると地味にストレスです。

それほど沢山あるケースではありませんでしたが、たまにあると「うっ」となっていました。

カスタマイズ後のmixin

// Elements
@mixin e($names...) {
  @each $name in $names {
    &__#{$name} {
      @content;
    }
  }
}

// Modifiers
@mixin m($names...) {
  @each $name in $names {
    &--#{$name} {
      @content;
    }
  }
}

可変長引数を使って、elementmodifierをそれぞれ複数渡せるようにしてみました。

先ほどの例で言うと下記の様に修正出来ます。

.block {

  @include m(modifier1, modifier2) {
    color:#fff;
  }

  @include m(modifier1) {
    background:#555;
  }

  @include m(modifier2) {
    background:#777;
  }
}

こちらのmixinを使うことで、BEMる時の重複スタイルを簡潔に書けるようになりました。


大した問題では無いかもしれませんが、せっかくなのでブログに書いてみました。