【SCSS】@mixin(ミックスイン)の使い方と引数

動点Qちゃん

SCSSの便利機能、@mixinを使えるようになりましょう・・・

動点P

効率化できるところはじゃんじゃんやっていきたい！

@mixin は複数の行で定義したスタイルを変数のように格納し、あとでそのスタイルを呼び出して、どこでも使いまわすことができます。何回も同じようなスタイルを書いたりコピペする必要がなくなり、コードを書くことを効率化できます。

というわけでSCSSの@mixinについて解説します。

動点Qちゃん

参考動画は「フロントエンドチャンネル」さんの【SASS/SCSS！@mixin（ミックスイン）を徹底解説！引数や実例、@includeでの呼び出しまで】です。かなりわかりやすいのでもうこの動画を見ていただければ解決します・・・

@mixinの使い方

@mixin は複数の行で定義したスタイルを格納して、好きな場所に呼び出せます。

使い方は【@mixinにスタイルを定義して@includeで呼び出す！】

以下の図のように

①定義したいスタイルを、@mixinと宣言し、スタイル名をつけて定義する

②呼び出したい場所で@includeと宣言し、スタイル名で呼び出してセミコロンで閉じる

スタイル名はわかりやすいものをつけてください。

さらに、ネストされたものもそのまま呼び出すことができます。

例えばaセレクタで囲ったなら、呼び出したときに、囲ったaセレクタもちゃんと付いてくるということです。絶対どこかのタグやクラスに入ってる要素などに使えますね。

@mixinは引数を使うことによって、個別に変更を加えることもできます。引数は引き渡す数であり、カラーコードや幅や高さなど、プロパティの値を変数として引き渡すことができます。

引数を使うには、

@mixin boxStyle($color)

などのように、@mixin宣言、スタイル名の後に()の中に$変数を入れます。

@include boxStyle(red);

@includeで呼び出すときにスタイル名の後に()内で変数としたものに値を入れます。

引数を使うことによって、ほぼ同じスタイルだけど、色だけ変えたい、とか　高さだけ変えたい、など個別に変更することができます。

複数の引数を使う、デフォルトで指定する

複数の引数を使い、幅と色、高さとマージンなど、複数の変数を扱うこともできます。

書き方

@mixin boxStyle($color: red, $width: 100px)

()の中に変数：値を入れることによってデフォルトの指定になります。そしてカンマで区切ってまた新たな変数を記述することにより複数の変数を扱うことが可能です。

呼び出し

@include boxStyle(red, 200px);

()内に変数の値を入れ、カンマで区切って次の値を入れていきます。

一部の変数だけ値を入れたいときは変数名：を書いて変数を指定してから値を入れます。

@include boxStyle($width: 200px);

これでかなり細かい個別の変更が可能になります。