Sassってみよう!〜@mixin編〜

mixin編

今回は@mixin

@mixinはスタイルをまとめて定義することが出来る便利な機能です。
これだけだと前回ご紹介した@extendと似ているのですが、
@mixinは引数を使えるという点と、
@extendと違いセレクタがグルーピングされない
という点において違いがあります。

この説明だけではピンとこないと思うので、
早速、使い方をみていきましょう。

@mixinの使い方

まず、@mixinの後に任意のミックスイン名をつけ、
{}の中の宣言ブロックに定義したいスタイルを記述します。

@mixin ミックスイン名 {
  定義したいcssプロパティ
}

そして、定義したミックスインを使う場合は、
ミックスインのスタイルを適用させたいセレクタの宣言ブロックに、@includeとミックスイン名を記述します。

セレクタ {
  @include ミックスイン名;
}

尚、ミックスイン名に使用できる文字は変数に使用できる文字と同じです。
(日本語OK、数字から始まる名前NGなど)

それでは具体例として、
boxのスタイルを定義し、「.text-box」に適用してみましょう。

@mixin box {
  margin-bottom: 20px;
  padding: 15px;
  border-radius: 10px;
  background: pink;
}
.text-box {
  @include box;
}

cssにコンパイル後 ↓

.text-box {
  margin-bottom: 20px;
  padding: 15px;
  border-radius: 10px;
  background: pink;
}

このように@extendと違い、
@mixin boxに「.text-box」セレクタがグルーピングされるのではなく、
「.text-box」単独の宣言ブロックにスタイルが展開されているのが分かります。

しかしこれだけだと、@extendの方がコンパイル後の
cssの記述量が少なくて効率がいいような気がしますよね。
(定義したミックスインが使用されない場合、%(プレースホルダー)を使用しなくても、
そのミックスインセットはcssに書き出されない点においては便利です。)

それでは、もう一つの@extendと違う点、
引数(パラメータ)を使える点の具体例を見ていきましょう。

引数の使い方

上記boxの角丸の数値を自由に変更したい。
そんな時に、引数(パラメータ)を設定すると便利です。

使い方は、ミックスイン名の後に()で変数を書くことによって引数(パラメータ)とし、目的のプロパティ値にその変数を設定します。
あとは@includeしたミックスインの引数に任意の数値を入れて自由に指定ができます。

@mixin box($val) {
  margin-bottom: 20px;
  padding: 15px;
  border-radius: $val;
  background: pink;
}
.text-box {
  @include box(0 20px 0);
}

cssにコンパイル後 ↓

.text-box {
  margin-bottom: 20px;
  padding: 15px;
  border-radius: 0 20px 0;
  background: pink;
}

初期値の使い方

引数を指定しない場合のデフォルトを設定したい場合、初期値を使用します。
初期値は引数の後に:(コロン)で設定します。
これで@include側の引数は省略が可能になります。

@mixin box($val:10px) {
  margin-bottom: 20px;
  padding: 15px;
  border-radius: $val;
  background: pink;
}
.text-box {
  @include box();
}

cssにコンパイル後 ↓

.text-box {
  margin-bottom: 20px;
  padding: 15px;
  border-radius: 10px;
  background: pink;
}

引数を複数設定する場合

では、上記の例でmarginやpaddingにも引数を使用したい場合はどうしたらいいでしょう?
この場合、,(カンマ)で区切って設定します。

@mixin box($mar:0 0 20px 0, $pad:15px, $bdr:10px) {
  margin: $mar;
  padding: $pad;
  border-radius: $bdr;
  background: pink;
}
.text-box {
  @include box();
}

cssにコンパイル後 ↓(初期値)

.text-box {
  margin: 0 0 20px 0;
  padding: 15px;
  border-radius: 10px;
  background: pink;
}

@include側に引数を指定した場合

.text-box {
  @include box(10px, 20px, 0 10px 0);
}

cssにコンパイル後 ↓

.text-box {
  margin: 10px;
  padding: 20px;
  border-radius: 0 10px 0;
  background: pink;
}

mixinの便利な使い方

前回ご紹介したネスト変数、@mixinを組み合わせてマウスオーバーの色を自動化してみましょう。

@mixin nav-col($val:red) {
  color: $val;
  &:hover {
    color: darken($val, 20%);
  }
} 
a {
  @include nav-col;
}

cssにコンパイル後 ↓

a {
  color: red;
}
a:hover {
  color: #990000;
}

引数にblueを指定した場合

a {
  @include nav-col(blue);
}

cssにコンパイル後 ↓

a {
  color: blue;
}
a:hover {
  color: #000099;
}

このように変数や@mixinなどを組み合わせることによって
コーディングを効率化できるところがSassのいいところですね。

その他にも、便利な使い方がいっぱいあると思いますので、
Sassに慣れたら調べてみるのもいいかもしれません。

【第1回】インストール編 【第2回】コンパイル編 【第3回】ネスト編 【第4回】変数編 【第5回】@extend編 【第6回】@mixin編 【第7回】@import編 【第8回】@for@while編

SNSでもご購読できます。