【SASS】mixin(ミクシン)とは何か？メリットや使い方を実例で解説｜引数ありとなし、初期値の指定、@content, @include, Error: Missing argument $ (.scss, 初心者向け、わかりやすい)

mixinとは何か？

SASSにはmixin（ミクシン）という機能が用意されています。

mixinとはコンポーネント（専用の名前をつけたパーツ）のことで、好きな場所で呼び出すことができます。

複数回使い回すプロパティや処理を設定する場合に使うと非常に便利です。

以下でmixinの使い方を実例を交えて解説していきます。

mixinの使い方

mixinを作成するときは以下のように@mixinのあとに、mixinの名前と処理を記述します。

@mixin <mixin名> { 処理 }

mixinの呼び出し

同じファイルの中か、@importを使う場合

mixinを定義してあるのと同じファイルの中でmixinを呼び出すか、そのファイルを@importで呼び出す場合は「@include」を使って使用したいmixin名を指定します。

@include <mixin名>

@useを使う場合

@useを使ってmixinが定義してあるファイルを読み込み、そのmixinを使用するためには、mixin名の前に名前空間を指定する必要があります。

@include <名前空間.mixin名>

mixinの実例（引数を使わない場合）

実例：同じファイル内で呼び出す場合

例えば、「caution」というmixinを作成して、下のheadlineの処理の中で呼び出す場合は以下のようにします。

@mixin caution {
  color: red;
  font-size: 32px;
}

// mixinを呼び出す
.headline {
  @include caution;
  font-weight: bold;
}

　↓ cssにコンパイル。

.headline {
  color: red;
  font-size: 32px;
  font-weight: bold;
}

@includeのところに指定したmixinの内容が入っていることがわかります。

実例：@importを使う場合

「_mixin.scss」というファイルに以下のようにmixin名「caution」が記述してあるとします。

@mixin caution {
  color: red;
  font-size: 32px;
}

これを「test.scss」というファイルの中で@importを使って読み込む場合は以下のようになります。

なお、「_mixin.scss」は「test.scss」と同じ階層にあるとします。

@import 'mixin';

.headline {
  @include caution;
  font-weight: bold;
}

　↓ CSSにコンパイル

.headline {
  color: red;
  font-size: 32px;
  font-weight: bold;
}

@includeのところに指定したmixinの内容が入っていることがわかります。

実例：@useを使う場合

「_mixin.scss」というファイルに以下のようにmixin名「caution」が記述してあるとします。

@mixin caution {
  color: red;
  font-size: 32px;
}

これを「test.scss」というファイルの中で@useを使って読み込む場合は、mixin名の前に名前空間を指定する必要があります。

なお、「_mixin.scss」は「test.scss」と同じ階層にあるとします。

@use 'mixin';

.headline {
  @include mixin.caution;
  font-weight: bold;
}

　↓ CSSにコンパイル

.headline {
  color: red;
  font-size: 32px;
  font-weight: bold;
}

指定した変数の値が入っていることがわかります。

実例：@useを使う場合（名前空間を変更する場合）

「_mixin.scss」というファイルに以下のようにmixin名「caution」が記述してあるとします。

@mixin caution {
  color: red;
  font-size: 32px;
}

これを「test.scss」というファイルの中で@useを使って読み込む場合は、mixin名の前に名前空間を指定する必要があります。

@useでファイルを読み込むときに「as」を使うと、好きな名前空間を指定することができます。

なお、「_mixin.scss」は「test.scss」と同じ階層にあるとします。

@use 'mixin' as mix;

.headline {
  @include mix.caution;
  font-weight: bold;
}

　↓ CSSにコンパイル

.headline {
  color: red;
  font-size: 32px;
  font-weight: bold;
}

指定した変数の値が入っていることがわかります。

mixinで引数を使う方法

使い方

mixinは定義するときに引数も指定することもできます。

@mixinの後ろにmixin名を指定して、( )の中に引数を記述していきます。その際、初期値を指定できます。

引数の初期値は省略することもできます。

@mixin <mixin名>($引数名1: 初期値1, $引数名2: 初期値2,,, ) { 処理 }

注意点

引数の初期値を省略する場合は、mixinを呼び出すときにかならず各引数の値を渡さなければいけません。渡す引数の数が合わないと以下のようなエラーが発生します。

Compilation Error
Error: Missing argument $color.

引数を使ったmixinの呼び出し方

引数を使ったmixinの呼び出し方には以下の３つの方法があります。

@include 名前空間.mixin名

mixinで引数を指定しない場合

mixinの呼び出し方

引数を指定しないで呼び出すと、mixinを作成したときに使用した初期値が入ります。

@include mixin名

実例

// mixinを定義
@mixin test($color: red, $fsize: 32px) {
  color: $color;
  font-size: $fsize;
}


//引数指定なしで呼び出す（初期値を使う）
.hoge {
  @include test;
  font-weight: bold;
}

　↓ CSSへのコンパイル結果

.hoge {
  color: red;
  font-size: 32px;
  font-weight: bold;
}

引数の中でデフォルトとして指定したredと32pxが適用されていることがわかります。

mixinの引数でプロパティの値を渡す（引数名は指定しない）

mixinの呼び出し方

引数でプロパティの値を指定することも可能です。

@include mixin名(値1, 値2,,,,)

実例

// mixinを定義
@mixin test($color: red, $fsize: 32px) {
  color: $color;
  font-size: $fsize;
}


//引数で値を指定して呼び出す
.hoge {
  @include test(blue, 18px);
  font-weight: bold;
}

　↓ CSSへのコンパイル結果

.hoge {
  color: blue;
  font-size: 18px;
  font-weight: bold;
}

@includeでmixinを呼び出したときに引数の中で指定したblueと18pxが適用されていることがわかります。

注意点：引数の順番が重要

引数で値を渡すときは、mixinを定義したときに指定した変数の順番で値を渡す必要があります。

例えば、以下のように、「@include test(18px, blue)」とすると、$colorに18px、$fsizeにblueが入ってしまいます。

// mixinを定義
@mixin test($color: red, $fsize: 32px) {
  color: $color;
  font-size: $fsize;
}


//引数で値を指定して呼び出す
.hoge {
  @include test(18px, blue);
  font-weight: bold;
}

　↓ CSSへのコンパイル結果

.hoge {
  color: 18px;
  font-size: blue;
  font-weight: bold;
}

引数名と値を指定して渡す

mixinの呼び出し方

mixinを@includeで呼び出すときに、常に同じファイルを使用するとは限りません。このためmixinで定義している変数の順番を覚えていない場合などがあります。

そういった場合に便利なのが、引数で変数名と値の両方を指定してmixinを呼び出す方法です。

@include mixin名($変数名1: 値1, $変数名2: 値2,,,,)

実例

// mixinを定義
@mixin test($color: red, $fsize: 32px) {
  color: $color;
  font-size: $fsize;
}


//引数を名前付きで指定する
.hoge {
  @include test($fsize: 18px, $color: green);
  font-weight: bold;
}

　↓ CSSへのコンパイル結果

.hoge {
  color: green;
  font-size: 18px;
  font-weight: bold;
}

@includeでmixinを呼び出したときに、mixinを定義している変数の順番とは異なる、順序で変数と値を渡していますが、指定した通りに受け渡しができています。

@contentの使い方

@contentとは何か？

@mixinの中で使うディレクティブの一つに@contentがあります。

@contenはmixinを定義するときに処理の中に記述します。

すると、mixinを@includeで呼び出すときに、{　}で処理を記述すると、そこに記述した内容が@contentの部分入ります。

つまり、外からmixinの中にプロパティと値を渡すことができる機能です。

使い方

@contentを使うときは、@mixinの処理の中に「@content」を記述します。指定した場所に渡された処理の内容が入ります。

@mixin mixin名(引数){
  処理
  @content
}

@includeでmixinを呼び出す

呼び出すときは通常のmixinと同じようにmixin名を指定します。その後ろに { 処理 }を記述します。すると、処理の内容がmixinの@contentの部分に入ります。

@include mixin名(引数){
  処理
}

@contentの実例

// mixinを定義
@mixin test($color: yellow, $fsize: 32px) {
  color: $color;
  font-size: $fsize;
  @content;
}

// mixinを呼び出す
.hoge {
  @include test($color: blue, $fsize: 16px) {
    max-height: 60%;
    max-width: 60%;
    background-color: gold
  }
}

@includeでmixinを呼び出したときに{ }の中に記述した内容が、@contentの中に入ります。

　↓ CSSにコンパイル

.hoge {
  color: blue;
  font-size: 16px;
  max-height: 60%;
  max-width: 60%;
  background-color: gold;
}

@contentの部分に、呼び出したときに記述した処理が入っていることがわかります。

mixinの応用

mixinを応用すると、レスポンシブに対応するためのメディアクエリを簡単に作成することができます。

画面幅のサイズと変数の作成

ここでは、画面幅のサイズとして、以下の５つの変数を定義します。

それぞれに対応するブレイクポイントを変数名「$breakpoint」として、メディアクエリの内容を値に入れます。

//冒頭に使うサイズを明記しておくと、何を指定できるかがわかりやすい。
$sizes: xl, lg, md, sm, xs; 

$breakpoint-up: ( 
  'xs': 'screen and (min-width: 321px)',
  'sm': 'screen and (min-width: 376px)',
  'md': 'screen and (min-width: 501px)',
  'lg': 'screen and (min-width: 961px)',
  'xl': 'screen and (min-width: 1201px)',
) !default;

mixinの作成

「mq」という名前のmixinを作成します。（Media Queryの略）

引数に「$size」を入れ、デフォルト値を「md」としておきます。

その中でメディアクエリ（@media）を使う記述を書きます。メディアクエリの内容は変数「$breakpoint」の値をmap-getで取得して表示するようにします。

また、「@include」で呼び出されたときに、処理の内容がメディアクエリの中に入るように「@content」を記述しておきます。

//冒頭に使うサイズを明記するとわかりやすい
$sizes: xl, lg, md, sm, xs;  

//ブレイクポイント
$breakpoint: ( 
  'xs': 'screen and (min-width: 321px)',
  'sm': 'screen and (min-width: 376px)',
  'md': 'screen and (min-width: 501px)',
  'lg': 'screen and (min-width: 961px)',
  'xl': 'screen and (min-width: 1201px)',
) !default;

//mixinを定義（初期値はmd）
@mixin mq($size: md) {
  @media #{ map-get( $breakpoint, $size ) } {
    @content;
  }
}

なおファイル名は「_mixin.scss」としています。

以上でSASSを使ったメディアクエリの作成は完成です。

メディアクエリの呼び出し

実際にメディアクエリを使うには以下のようにします。

＠importや同じファイル内で呼び出す場合

@include mq('サイズ')

＠useで呼び出す場合

＠useで呼び出す場合は、mixinの前に名前空間を指定する必要があります。

@include 名前空間.mq('サイズ')

なお、引数は「$breakpoint」で定義した「xl, lg, md, sm, xs」のいずれかを渡します。

実例

例えば、.headlineというセレクタの処理で、ブレイクポイントの指定がないときは「color: red;」を適用し、画面幅が「xs」のときは「color: blue;」、画面幅が「lg」のときは「color: gold;」を適用する処理は以下のようになります。

@import（または同一ファイル内の場合）

@importを使って「_mixin.scss」を呼び出す（または同一ファイル内の場合）は以下のようになります。（※ファイルパスは適宜設定してください。以下は同一階層にある場合の例です）

@import 'mixin'

.headline{
  color: red;
  @include mq('xs'){
    color: blue;
  }
  @include mq('lg'){
    color: gold;
  }
}

　↓ CSSへのコンパイル

.headline {
  color: red;
}
@media screen and (min-width: 321px) {
  .headline {
    color: blue;
  }
}
@media screen and (min-width: 961px) {
  .headline {
    color: gold;
  }
}

指定した、メディアクエリが正しく適用されていることがわかります。

@useを使う場合

@useを使って「_mixin.scss」を呼び出す場合は、mixinを呼び出すときにファイルの名前空間も指定する必要があります。（※ファイルパスは適宜設定してください。以下は同一階層にある場合の例です）

@use 'mixin';

.headline{
  color: red;
  @include mixin.mq('xs'){
    color: blue;
  }
  @include mixin.mq('lg'){
    color: gold;
  }
}

　↓ CSSへのコンパイル

.headline {
  color: red;
}
@media screen and (min-width: 321px) {
  .headline {
    color: blue;
  }
}
@media screen and (min-width: 961px) {
  .headline {
    color: gold;
  }
}

指定した、メディアクエリが正しく適用されていることがわかります。