Sassのミックスインを使うべきか、プレースホルダセレクタを使うべきか

今日はちょっと実装寄りの話を。Sassで「同じようなスタイル」をまとめる方法として、

  1. ミックスインを作って各スタイルにincludeする
  2. 既存のスタイルをextendする
  3. プレースホルダセレクタを作ってextendする

という3つの方法があるのですが、1と3の違いがよく分かっていませんでした。ので、メモ。

コードを見れば一目瞭然

ミックスインを使う場合

before
after

ミックスインで定義したスタイルが各スタイルに単純に挿入されています。

プレースホルダセレクタを使う場合

before
after

プレースホルダセレクタで定義したスタイルを使っているセレクタがまとまって定義されます。

どう判断すれば良いか

  • ミックスインを使うとセレクタ数は抑えられるが、同じスタイル定義が重複するので、CSSへのコンパイル後のソースがDRYにならない（ファイル容量も増える）。
  • プレースホルダセレクタを使うとセレクタ数が増えるが、同じスタイル定義がひとまとめにされるので、CSSへのコンパイル後のソースがDRYになる。

IE9以下に対応する場合はCSS内のセレクタ数を4095個以下におさえなくてはいけない問題があるので、プレースホルダセレクタを多用するとセレクタ数が膨れ上がってしまうかも知れないと感じました。ただ、ソースコードのサイズは小さくおさえられますね。

セレクタ数問題についてはCSSへのビルド時にセレクタ数を見て適切に分割してくれるような仕組みがあれば、問題はないかも知れません。