2-6. @mixinで定義したスタイルを@includeで呼び出す

1.@extendと@mixinの違い

@extendと@mixinは機能が似ているので混同しがちです。以下の点を抑えて、違いについて理解しましょう。

継承する/スタイルを定義して再利用する

@extendは「継承する」、@mixinは「スタイルを定義する」という違いがあります。

@extendは継承元のセレクタを利用することができますが、@mixinは定義したスタイルを単独で利用することはできません。あくまで定義しただけです。

引数が使える

引数というのはプログラミング用語の1つで、プログラムに対して値を渡すことです。あるプログラムに対して引数で値「A」を渡すと、そのプログラムがAについて処理を行い、結果として「Z」を出力する、という感じです。

@mixinでスタイルを定義したときに、例えば「縦10px・横30px・背景色は黄色」というスタイルを定義したとします。そのときに10px・30px・黄色の部分を引数にしておけば、@icludeで該当の箇所を書き換えて出力することができます。

出力されるコードが違う

@extendのプレースホルダーセレクタを使った継承と、@mixinによるスタイルの定義で、同じようなスタイルを出力しようとすると、違いがわかります。

まずは@extendによるもの

%box{
  color: red;
}

.box-1{
  @extend %box;
  border: solid 1px #000;
}

.box-2{
  @extend %box;
  border: solid 1px #f00;
}

出力するとこうなります。

.box-2, .box-1 {
  color: red;
}

.box-1 {
  border: solid 1px #000;
}

.box-2 {
  border: solid 1px #f00;
}

続いて@mixinと@includeを使ったもの

@mixin box{
  color: red;
}

.box-1{
  @include box;
  border: solid 1px #000;
}

.box-2{
  @include box;
  border: solid 1px #f00;
}

コンパイル結果です。

.box-1 {
  color: red;
  border: solid 1px #000;
}

.box-2 {
  color: red;
  border: solid 1px #f00;
}

@extendでは同じスタイルの箇所についてはセレクタを並列に並べていましたが、@mixinではそれぞれのセレクタ内に振り分けられています。

2.@mixinと@includeの使い方

それでは実際の使い方を解説していきます。

@mixinの使い方

@mixinはスタイルを定義するためのものです。@mixinに続いてスタイル名を記述し、{〜}内にスタイルを記述します。

このときにスタイル名のあとに引数と、引数の初期値を指定することができます。引数には「$」を付けた変数名を記述し、「：」で区切って初期値を記述します。スタイル内に引数を利用する箇所を記述すれば、引数が使えるようになります。複数の引数を使いたいときはカンマで区切ります。

例です。

@mixin box($width: 1px, $color: #fff){
  border: solid $width $color;
}

@includeの使い方

@includeは定義されたスタイルを呼び出すためのものです。@includeに続いてスタイル名を記述すると呼び出せます。

スタイル名に続いて(〜)に引数を入れると、引数が当てはめられたスタイルが出力されます。引数を入れないと、初期値のスタイルが出力されます。

例です。

.box-1{
  @include box(10px,#000);
}

@mixinと@extendのサンプル

実際に@mixinと@extendを使ってみましょう。

@mixin box($width: 1px, $color: #fff){
  border: solid $width $color;
}

.box-1{
  @include box(10px,#000);
  background: #f00;
}

.box-2{
  @include box(5px,#0f0);
  background: #00f;
}

.box-3{
  @include box;
  background: #00f;
}

コンパイル結果です。

.box-1 {
  border: solid 10px #000;
  background: #f00;
}

.box-2 {
  border: solid 5px #0f0;
  background: #00f;
}

.box-3 {
  border: solid 1px #fff;
  background: #00f;
}

3.カンマを使うプロパティに使う可変長引数

background-imageやbox-shadow、text-shadowなどは、プロパティをカンマで区切ることがあります。通常の引数ではカンマ区切りの値はエラーになってしまいますので、可変長引数というものを使います。

以下の例のように、@mixinでスタイルを定義する際に、引数名のあとに「...」を付け加えると、可変長引数になります。

@mixin shadow($value...) {
    box-shadow: $value;
}

.hoge {
    @include shadow(10px 10px 3px #000, 20px 20px 3px #ccc);
}

コンパイル結果です。

.hoge {
  box-shadow: 10px 10px 3px #000, 20px 20px 3px #ccc;
}