【CSS】Mixinについて

前回cssにおける継承についてまとめました。今回は継承と似た機能を持つ「Mixin」について取り上げます。

@mininの記述の後にクラスを書き、利用するときは@includeで呼び出します。

@mixin box{
  width: 50%;
  height: 50%;
}

.red_box{
  @include box;
  background: #ee3f3f;
}

.red_box {
    width: 50%;
    height: 50%;
    background: #ee3f3f
}

継承ではextend元のクラスとグループ化されて出ていましたが、Mixinはそうでないことが分かります。また、Mixinではスタイルに引数を持たせることができ、コードに置き換えることができます。

色を引数に設定する場合

@mixin box($color:#000000){ 　// 引数:hogeで初期値を指定
  width: 50%;
  height: 50%;
  background: $color;
}

.red_box{
  @include box(#ee3f3f);
}

.red_box {
    width: 50%;
    height: 50%;
    background: #ee3f3f
}

引数を設定してあげることでred_boxに色を指定することができました。

継承とMixinとの違いは・コンパイル後グループ化されるか・引数を使えるかどうかになります。使いどころを見極めて使用していければと思います。

備忘録