Sassの基礎、@mixin（ミックスイン）の使い方

CSSでデザインを構築していく中でSassを利用していくと、作業効率とメンテナンス性の高いコードを書いていくことができます。
Sassでのコードの書き方はいろいろありますが、ここでは「@mixin（ミックスイン）」のコードの書き方についてご紹介していきます。

@mixinとは、よく利用するCSSのスタイルを定義しておいて、別の場所で使い回せるようにする機能のことです。
また、その定義のスタイルに「値」を「引き渡す」ことができる引数も使えます。

プログラミングでいうところの、ユーザー定義関数（独自関数）のように、プログラムをまとめて定義しておいて、使いたい時に関数を呼び出して処理を実行するのと同じです。

CSSでもプログラミングのように、要素にあてるスタイルを管理していくことができます。

ネストや変数を扱う基礎については、無料で人気のコードエディタ「Visual Studio Code」のターミナルを利用した、手軽にコンパイルする方法と一緒に、以下の記事でご紹介しています。

作業効率・メンテナンス性を高めるSassの使い方。実際に書いて体験してみよう

それでは、@mixinの使い方を見ていきましょう。

@mixinの使い方

まずは、@mixinの基本的な書き方です。

@mixinと宣言してから、半角スペースを空けてmixinの名前を決めます。
その後に波括弧「{ }」のブロック内にスタイルを定義します。

@mixin mixinの名前 {
  //スタイルを定義
}

セレクタ {
  ＠include mixinの名前;
}

では、サンプルコードで見ていきましょう。
コンテンツを覆うブロックをいくつか用意してみます。

HTML

<section>
  <div class="block01"></div>
  <div class="block02"></div>
  <div class="block03"></div>
</section>

続いて、Sassファイルに使い回せるCSSスタイルを定義していきます。

Sass（style.scss）

@mixin baseBlock {
  width: 100%;
  max-width: 800px;
  height: 100%;
  min-height: 200px;
  margin: 2em auto 0;
  border: 5px solid #bbb;
}

.block01 {
  @include baseBlock;
  background: #d8bebe;
}

.block02 {
  @include baseBlock;
  background: #b3b4e6;
}

.block03 {
  @include baseBlock;
  background: #bae6b6;
}

mixinの名前はわかりやすく「baseBlock」としました。
mixinの宣言の後、mixinのブロック内にベースとなるスタイルを定義します。
そして、コンテンツを覆うクラス名を付けた要素に対して、「＠include」でmixinの定義を呼び出します。
あとは、ベースとなるスタイルに各要素に違う背景色を指定しました。

以下、コンパイル後のCSSになります。

CSS（style.css）

.block01 {
  width: 100%;
  max-width: 800px;
  height: 100%;
  min-height: 200px;
  margin: 2em auto 0;
  border: 5px solid #bbb;
  background: #d8bebe;
}

.block02 {
  width: 100%;
  max-width: 800px;
  height: 100%;
  min-height: 200px;
  margin: 2em auto 0;
  border: 5px solid #bbb;
  background: #b3b4e6;
}

.block03 {
  width: 100%;
  max-width: 800px;
  height: 100%;
  min-height: 200px;
  margin: 2em auto 0;
  border: 5px solid #bbb;
  background: #bae6b6;
}

CSSファイルのコードは上から適応されますので、@mixinの宣言は先に記述してください。
mixinでスタイルを定義した後に、そのmixin名の定義が利用できます。

@mixinで引数を使う

mixinは引数を扱うこともできます。
mixinの名前の後、括弧「( )」内に定義のスタイルに引き渡すための引数（変数）を設定します。
そして、スタイルの定義内で引数を使っていきます。

@mixin mixinの名前($引数名) {
  //スタイルを定義
}

セレクタ {
  ＠include mixinの名前(引数の値);
}

引数には、初期値も設定できます。
また、カンマ（,）区切りで複数指定することも可能です。

@mixin mixinの名前($引数名:初期値) {
  //スタイルを定義
}

セレクタ {
  ＠include mixinの名前;
}

@mixin mixinの名前($引数名1:初期値, $引数名2:初期値) {
  //スタイルを定義
}

セレクタ {
  ＠include mixinの名前(引数名1の値, 引数名2の値);
}

@includeで呼び出す際に、変数の値を設定していきます。

サンプルとして、borderプロパティの値を引数を使って設定してみます。

Sass（style.scss）

@mixin baseBlock($bWeight, $bStyle, $bColor) {
  width: 100%;
  max-width: 800px;
  height: 100%;
  min-height: 200px;
  margin: 2em auto 0;
  border: $bWeight $bStyle $bColor;
}

.block01 {
  @include baseBlock(5px, solid, #d86767);
  background: #d8bebe;
}

.block02 {
  @include baseBlock(5px, solid, #5c5ee4);
  background: #b3b4e6;
}

.block03 {
  @include baseBlock(5px, solid, #59e74c);
  background: #bae6b6;
}

borderプロパティに設定する線の太さと種類、色に対して、引数名の値で引き渡します。

複数の引数を設定したり初期値を設定していく場合は、宣言した引数の順番で値を設定します。
初期値を設定している場合は、設定する引数の数が少ないと、宣言した引数の順番の最初の引数から設定となり、設定しなかった引数については、初期値が適応されます。

Sass（style.scss）

@mixin baseBlock($bWeight: 2px, $bStyle: solid, $bColor: #777) {
  width: 100%;
  max-width: 800px;
  height: 100%;
  min-height: 200px;
  margin: 2em auto 0;
  border: $bWeight $bStyle $bColor;
}

.block01 {
  @include baseBlock;
  background: #d8bebe;
}

.block02 {
  @include baseBlock(5px, dashed);
  background: #b3b4e6;
}

.block03 {
  @include baseBlock(5px, solid, #59e74c);
  background: #bae6b6;
}

引数を何も設定していなければ、すべて初期値となります。

以下、複数の引数を初期値と一緒に設定したSassファイルのコンパイル後のCSSになります。

CSS（style.css）

.block01 {
  width: 100%;
  max-width: 800px;
  height: 100%;
  min-height: 200px;
  margin: 2em auto 0;
  border: 2px solid #777;
  background: #d8bebe;
}

.block02 {
  width: 100%;
  max-width: 800px;
  height: 100%;
  min-height: 200px;
  margin: 2em auto 0;
  border: 5px dashed #777;
  background: #b3b4e6;
}

.block03 {
  width: 100%;
  max-width: 800px;
  height: 100%;
  min-height: 200px;
  margin: 2em auto 0;
  border: 5px solid #59e74c;
  background: #bae6b6;
}

初期値のままでいくのか、または少し調整するのかはmixinの定義をうまく活用しながら、うまくコントロールしていくことができます。

以下、ここまでの実装結果になります。
動画（4分ほど）