ミックスインとは、スタイルを定義しておき、それを任意の場所で呼び出して使用することができる機能です。似たような機能に@extendというものもあります。とりあえず、基本的なミックスインの使い方を紹介します。

ミックスインの使い方

ミックスインを使用するには、「@mixin ミックスイン名」の形式で定義をして、スタイルを記述していきます。

@mixin hoge {
  margin: 10px;
  font-size: 120%;
}

このように、スタイルの指定はCSSと何ら変わりはありません。しかし、このままでは機能はせず、呼び出す必要があります。定義したミックスインを呼び出すには以下のようにします。

//Sass
.example {
  @include hoge;
}

//CSSコンパイル
.example {
  margin: 10px;
  font-size: 120%;
}

このように、「@include ミックスイン名;」の形式で定義したミックスインを呼び出すことができます。ミックスインを使用する場合は、「@mixin」で定義して、「@include」で呼び出すというセット使いになるということです。

@extendとの違いは、複数箇所で使用した場合、@extendはグループ化されてCSSに展開されますが、@mixinはそれぞれ個別にCSSに展開されます。

引数を使用する

ミックスインでは、引数を指定してスタイルの値を変えて使うこともできます。
以下のような引数を定義したとします。

@mixin box($value) {
  padding: $value;
}

この引数を使用するには、以下のようにします。

//Sass
.hoge1 {
  margin-bottom: 10px;
  @include box(10px);
}
.hoge2 {
  margin-bottom: 20px;
  @include box(5px 10px);
}

//CSSコンパイル
.hoge1 {
  margin-bottom: 10px;
  padding: 10px;
}
.hoge2 {
  margin-bottom: 20px;
  padding: 5px 10px;
}

このように同じミックスインを呼び出していますが、それぞれ引数の値を変えて呼び出すことができます。

おすすめの記事