Compassに依存しない! Sass (SCSS) をちゃんと学ぶ その4

脱Compass Sassを学ぶ - その4

引き続きSassのお勉強です。今回はやっとここまで来ました、ミックスインそしてプレースホルダーと継承についてです。
どれもスタイルのセットを定義しておいて、必要に応じて呼び出すといった感じの機能ですが少しづつ振る舞いが違います。

Mixin
  • よく使うスタイルを定義できる
  • 引数を使用できる
  • @include で呼び出す
extend(継承)
  • 定義済みのスタイルを継承する
  • コンパイル時にグループ化される
  • @extend で呼び出す
プレースホルダ
  • よく使うスタイルを定義できる
  • コンパイル時にグループ化される
  • 定義自体は出力されない
  • @extend で呼び出す

それぞれの特徴をざっと書きましたが、1つずつ見て行きましょう。

Mixin

Mixinは関数によく似ています。Sassにおける関数との違いは出力の違いで、MixinはCSSを書き出すもの、関数は値を返すものと思っておけばいいと思います。Mixinは必ずしも引数付きで定義する必要はないのですが、それだとMixinを使う必要性もなくプレースホルダーを使えばいいので、通常は引数付きで定義します。

@mixin ミックスイン名( 引数 ) { スタイル }

上記の形で定義します。引数はデフォルト値も定義でき、複数の引数を定義する場合はカンマ区切りで定義します。
定義したミックスインは次のように @include を使用して呼び出します。

@include ミックスイン名( 引数 );

以下は使用例です。

extend (継承)

extend は、すでに定義されているスタイルを継承して別のセレクタにも適用する機能です。スタイルの継承は @extend を使用して呼び出します。

Mixinの項で挙げた例を、継承を使用して表した例です。

コンパイル後のCSSは、継承を使用したセレクタをグループ化する点に注目してください。

また、継承で注意する点もあります。それは、ネストされたスタイルも継承されるという事です。

上記の例は、ネストで定義したp要素のスタイルも継承されると思わず失敗してしまった例です。このように、ネストで多くのセレクタを抱え込んだスタイルを継承する場合は、思わぬ罠に引っかかる場合があるので要注意です。

Placeholder(プレースホルダー)

プレースホルダーはスタイルの継承とほぼ同じですが、元となるスタイルを継承するのではなく、スタイルのテンプレートを定義するといった感じです。Mixinと継承を足して2で割った感じでしょうか。

%プレースホルダー名 { スタイル }

上記の形で定義し、継承と同様に @extend を使用して呼び出します。


Mixin, Extend, Placeholder のどれを使うかの選択はセンスの見せ所ですね。
カスタマイズ性ならば引数のつかえるMixinを、clearfixのようなマークアップに記すクラススタイルは extend で、マークアップに記さないものは Placeholder を使うのが良さそうです。

次回の制御文と関数で、とりあえずSassの勉強は終わりにします。