mixin、extend、プレースホルダーの違い

Sassの目玉機能と言えばmixinという認識が一般的にあると思います。

mixinもextendもプレースホルダーも「呼び出す（使いまわし）」という意味ではどれも同じですが、少し用途が違うので理解して使うべきと思います。

@extend

まずは最も単純で、利用頻度も一番少ないと思われるextendから。

extendは特定のセレクタを呼び出し流用（正式には継承）する機能のことです。

分かりやすい表現で言うとコピーです。

.aaa {
color:#000;
font: {

  size: 1.6rem;

  weight: 500;

  }

}

.bbb {

@extend: .aaa;

padding: 5px;

}

セレクタ.aaaのプロパティと値を.bbbに継承させたい場合、上記のように記述します。

.aaa, .bbb {
color:#000;
font-size: 1.6rem;

font-weight: 500;

}

.bbb {

padding: 5px;

}

CSSにコンパイルすると上記の記述されます。

ポイントは継承元である.aaaもセレクタとして存在するということです。コピーなので当然ですね。

ただし、このextendは十分に注意して利用しなければなりません。

例えば、今回の例ではセレクタ.aaaにも.bbbにも同じプロパティや値がセットされています。しかしそれが本当に必要なのか？.aaaと.bbbの関連性が非常に重要になると思います。

プレースホルダー

個人的にはextendより使い勝手の良い機能と思っています。

セレクタをextendするのには

1.ネストも一緒に継承する

2.セレクタ間の関係性をきっちり設計できている必要がある

というリスクがあります。

その点、プレースホルダーはセレクタ変数というかセレクタテンプレートのような利用ができるので、本来の流用が非常にやりやすい機能です。

ただし、少し癖のある機能で、変数のように事前に定義し、使いたい場所に記述するとそこが置き換わるという表記ルールではなく、プレースホルダーをextendしたセレクタが、プレースホルダーに追加されるという表記になります。

プレースホルダ―でセレクタを設定する場合は頭に%を付けます。

%test {
margin: 0 auto;
  h2 {

  font: {

    size: 1.8rem;

    weight: 800;

    }

  }

  h3 {

  font-size: 1.6rem;

  }

}

.ph-test {

@extend %test;

}

testというプレースホルダーに対してph-testでextendする設定です。

.ph-test {
margin: 0 auto;
}

.ph-test h2 {

font-size: 1.8rem;

font-weight: 800;

}

.ph-test h3 {

font-size: 1.6rem;

}

プレースホルダ―で設定したセレクタは表示されずに、プレースホルダーの内容が記述された場所にextendしたセレクタが記述されます。

行が離れた場所での設定などにはかえって混乱するため向かないかもしれません。

@mixin

mixinの最大の特徴は引数を設定できることです。関数のような扱いができるということです。

またextendやプレースホルダーと違い、事前に定義し流用できるまさに変数と同じような利用ができます。

使い方はmixin定義時に引数の初期値を設定し、include時に初期値以外にしたい場合引数の値を変更することができるというものです。

実際の使い方を見たほうがわかりやすいですね。

@mixin test-style($color:#FFF, $fsize:1.6rem) {
color: $color;
font-size: $fsize;

}

.main {

@include test-style();

}

.sub {

@include test-style(#000, 1.2rem)

}

まずはじめの定義時に引数の値の初期値をセットしています。文字色白、文字サイズ1.6remというものです。

この文字色や文字サイズは引数になるので、include時に変更が可能になります。セレクタ.subの時のincludeがそれにあたります。

.main {
color: #FFF
font-siza: 1.6rem;

}

.sub {

color: #000;

font-size: 1.2rem;

}

コンパイルしたCSSでは上記のような記述になります。

mixinは変数のような扱いと、引数により差分管理が行いやすいので、compassなどのフレームワーク化が進んでいるのだと思います。

Sass公式のmixinの使い方は直訳したものが以下になります。

CSSの中には、特にCSS3と存在する多くのベンダープレフィックスを使って書くのが少し面倒です。 mixinを使用すると、サイト全体で再利用したいCSS宣言のグループを作成できます。ミックスインの柔軟性を高めるために値を渡すことさえできます。ミックスインの良い使い方はベンダープレフィックスです。 border-radiusの例を以下に示します。

あくまでベンダープレフィックス記述の簡略化を目的としたのかもしれませんが、現状は引数での差分も管理できるセレクタテンプレートという扱いでしょうか。

まとめ

extend、プレースホルダー、mixinと3つの機能を説明しました。

mixinがやはり主となる機能と思います。プレースホルダーは場合によっては使うという感じでしょうか。

extendは正直使いどころが難しいく怖いという感じでしょうか。

参考になれば幸いです。