Culture27

Sass(Scss) Memo: @mixin

  • Published:

今回は@mixinについてです。
Mixinはスタイル（規則集合や宣言）を定義し、それを再利用することができます。
定義したMixinは@includeでインクルードして使用します。また、Mixinには引数を渡すことができます。

Mixinの利用例

clearfix用のMixinを例に説明します。

まずはMixinを定義します。

Scss 
@mixin clearfix {
    *zoom: 1;
    //
    &:after {
        content: "";
        display: block;
        clear: both;
    }
}

これをインクルードして利用します。

Scss 
.clearfix {
    @include clearfix;
}

これをコンパイルすると下記のようになります。

CSS 
.clearfix {
  *zoom: 1;
}
.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

簡単だし、コード管理も楽ですね。

ただ、別のセレクタにも同じコードを適用する場合、@extendを利用することも検討してください。

Scss 
.clearfix {
    @include clearfix;
}
.header {
    @extend .clearfix;
}

これをコンパイルすると下記のようになります。

CSS 
.clearfix, .header {
  *zoom: 1;
}
.clearfix:after, .header:after {
  content: "";
  display: block;
  clear: both;
}

セレクタをグループ化して出力されるので、セレクタごとにコードが展開される@mixinよりも全体のコード量を減らすことができます。

引数について

引数はMixinの中で変数として使うことができ、CSSのプロパティやプロパティの値、@ifの条件式などに利用することができます。

下記は引数を伴うMixinの例です。

Scss 
@mixin sample-mixin($var1, $var2: margin, $var3: false) {
    width: $var1;
    #{$var2}: 0;
    @if $var3 {
        overflow: hidden;
    }
}
  • 引数を複数指定する場合は,（カンマ）で区切ります。
  • 初期値のない引数は初期値がある引数よりも必ず先に書かなければエラーになります（$var1: false, $var2だとエラー）。
  • 初期値が指定されていない引数はインクルード時に値を指定しないとエラーになります。

インクルード時の引数の記述例

前述のsample-mixinを例にします。

Mixinの引数の順番通りに指定する

単純にMixinの引数の順番通りに値を指定します。
引数のキーワード（$var1や$var2など）を記述する必要がないのでタイプ数が少なくてすみます。
ただ、コードを後で見返したときにMixinによっては引数の値が何なのかが分かりづらいかもしれません。

Scss 
.selector {
    @include sample-mixin(100px, padding, true);
}

特定の引数だけ指定する

$var2は初期値を利用して、$var3の値だけ指定します。

Scss 
.selector {
    @include sample-mixin(100px, $var3: true);
}

キーワードを使い、順不同で指定する

$var3を記述した後に$var2を記述します。
引数のキーワードを記述すると引数の順番が関係なくなるようです。ただ、コードの見通しが悪くなりそうなので使わないほうが良さそうですが...。

Scss 
.selector {
    @include sample-mixin(100px, $var3: true, $var2: padding);

    // 下記のように$var1を最後に記述してもエラーにはなりません。
    @include sample-mixin($var3: true, $var2: padding, $var1: 100px);
}

Mixinを使えば作業をかなり効率化することができますが、複雑すぎると運用・管理のコストを増やしてしまう可能性があるのでバランスを考慮して利用したいですね。