Sassの「@mixin（ミックスイン）」の使い方と「引数」の解説

2020年1月23日

Sassの基礎は分かってきたので、そろそろ@mixin（ミックスイン）の使い方を学びたい。

Sassの真骨頂ともいえる@mixin（ミックスイン）機能。初心者の方はここで少し立ち止まる人が多いので、ここをクリアして本当のSassの威力を発揮しよう！

今回は@mixin（ミックスイン）の使い方を基礎からきっちり理解できるように、初心者でもわかりやすく、引数の概念から丁寧に解説しよう！

@mixin（ミックスイン）とは？

@mixin（ミックスイン）とは、CSSのスタイルを定義しておいて、別の場所でそのスタイルを使い回せる機能。また、引数が使えるのも大きな特徴と言える。

「@extend」と機能が似ているので、その違いがわかりにくい人も多いだろう。「@extend」と「@mixin」の違いを知りたい方は、こちらの記事を見てみよう。

▶ Sassの「@mixinと@extendの違い」と使い分け

Sassの勉強中だけど、@mixinと@extendの違いがいまいちよくわからない。それぞれの使い所が知りたい。確かに…

@mixin（ミックスイン）の基本的な使い方

再利用したいスタイルを@mixin hoge{}の形式で定義した上で、利用したい位置で@include hogeで呼び出すスタイルだ。

@mixinを利用したSass

@mixin baseBox{
  border:1px solid #ccc;
  padding:10px;
}
.box1{
  @include baseBox;
  background-color:#eee;
}

コンパイルされたCSS

.box1 {
  border: 1px solid #ccc;
  padding: 10px;
  background-color: #eee;
}

「引数」を使った@mixin（ミックスイン）の使い方

@mixinでは「引数」を使うことができ、@mixinのカスタマイズ性が大幅にアップする！！

その前に「引数」ってなんだよ？

プログラミングでよく使われる用語「引数」とは「引き渡す値」という意味であり、Sassのmixinで使う引数は「cssの値」つまり「線の幅」であったり「色」であったり「widthの横幅」であったり、cssのプロパティに対する「値」を「引き渡す」ことができ、基本的に任意の「変数」を入れる。

「変数」について詳しく知りたい方はこちらの記事をあわせて読もう。

▶ Sassの「変数」の定義と参照の基本ルール。

Sassの変数の使い方を基礎から学びたい！変数はとても便利な機能だ。プログラミングの世界では当たり前に使われる変数だが…

しかしこの「引き渡す」がイマイチよくわからない人も多いと思うので、この後の例で具体的に説明しよう。

引数を使う記述の仕方

引数を使う場合は@mixin hoge($arg){}の形式で引数をつけて、引数を利用する部分に指定した引数をのcolor:$arg;ような形で渡す。

（ちなみに引数の説明でよく出てくる「arg」とは「英語のargument（引数）」の略であり、任意のキーワードでありargである必要はない。）

では具体例で見ていこう！

引数を使った@mixinのSass

@mixin baseBox($bgColor){
  border:1px solid #ddd;
  background-color:$bgColor;
}
.box1{
  @include baseBox(#eee);
  width:200px;
}

コンパイルされたCSS

.box1 {
  border: 1px solid #000;
  background-color: #eee;
  width:200px;
}

この例の「baseBox」というのがミックスインの名前であり、引数は「$bgColor」という任意の名前の変数。

このミックスインでは「$bgColor」の値をbackground-color:$bgColor;という形で、background-color（背景色）の値に引き渡している。

この引数の使い方は、ミックスインを呼び出す記述の際に@include baseBox(#eee);という形式で、「（）カッコ」の中に値をそのまま記述する。

これで、コンパイル後のCSSでbackground-color: #eee;という具合に#eeeが引き渡された形となる。

言うなれば、引数とは値を引き渡す為の「郵便ポスト」のようなものと例えられる。（わかりにくい？）

引数に「初期値」を入れる事ができる

前述した@mixin baseBox($bgColor){}という記述の場合、呼び出す時にかならず「引数の値」を入れる必要があった。

しかし@mixin baseBox($bgColor:#eee){}のように変数名+:+値の形式で「初期値（デフォルト値）」を入れておく事で、基本の値として設定する事ができるのだ。

また、初期値を設定した場合であっても、呼び出す時に「別の値」を指定する事で、初期値を「上書き」する事もできる。

引数に初期値を入れた Sass

@mixin baseBox($bgColor:#eee){
  border:1px solid #ddd;
  background-color:$bgColor;
}
.box1{
  @include baseBox();
  width:200px;
}
.box2{
  @include baseBox(#f90);
  width:100px;
}

コンパイルされたCSS

.box1 {
  border: 1px solid #000;
  background-color: #eee;
  width:200px;
}
.box2 {
  border:1px solid #000;
  background-color: #f90;
  width:100px;
}

この場合@mixin baseBox($bgColor:#eee)と初期値#eeeを入れる事で、「.box1」では@include baseBox();と値を入れなくても、コンパイル後はbackground-color: #eee;と出力された。

また、「.box2」では@include baseBox(#f90);という形で初期値を上書きする値を記述した事で、コンパイル後のCSSではbackground-color: #f90;と初期値を上書きする事ができている。

このように、初期値を入れる意味としては、つくったスタイルの基本の値として、初期値を入れておき、バリエーションのスタイルとして、値を上書きして使うといった形で使うことができる。

「引数を複数」入れる事もできる

これまでは、引数を１つだけ入れていたが、,で区切る事で、引数は「複数」入れる事も可能だ。

引数に初期値を入れた Sass

@mixin borderStyle($borderSize, $bordertype, $borderColor){
  border:$borderSize $bordertype $borderColor;
}
.box1{
  @include borderStyle(1px, solid, #ccc);
  width:200px;
}

コンパイルされたCSS

.box1 {
  border: 1px solid #ccc;
  width:200px;
}

呼び出す時は、@include borderStyle(1px, solid, #ccc);のように同じ順番で値だけを入れる場合と、呼び出す時に@include borderStyle($borderColor:#ccc, $bordertype:solid, $borderSize:1px);のように変数名とセットで記述すれば、順番を変えて値を入れる事も可能だ。

複数入れた引数にそれぞれ初期値を設定する事も可能

引数を複数入れる場合も、同様に初期値を設定できる。

引数に初期値を入れた Sass

@mixin borderStyle($borderSize:1px, $bordertype:solid, $borderColor:#ccc){
  border:$borderSize $bordertype $borderColor;
}
.box1{
  @include borderStyle();
  width:200px;
}
.box2{
  @include borderStyle($borderSize:5px);
  width:400px;
}

コンパイルされたCSS

.box1 {
  border: 1px solid #ccc;
  width:200px;
}
.box2 {
  border: 5px solid #ccc;
  width:400px;
}

呼び出す際は、@include borderStyle();とすれば、初期値通りにコンパイルされ、@include borderStyle($borderSize:5px);のように、変数とセットで値を入れて呼び出せば、値を入れたものだけが上書きされ、残りは初期値が表示される。

フロントエンドスキルをもっと早く・簡単にマスターしたい方へ！

JavaScriptやCSS・Sassなどフロントエンド学習は、初心者が「独学」で完全マスターするには半年以上かかり、相当根気よくやらないと挫折してしまうか、ライバルに出遅れてしまう…。

短期間でフロントエンド・WEBデザインをマスターするには？

私の経験だが、手軽なオンラインスクールを利用した方が圧倒的に早かった。独学だと「何からどこまで勉強すれば良いかわからない」ものを、これだけ学習すればOKというポイントをおさえた教科書で学習しながら、わからない点を質問し放題なので、多少の出費は必要だが２ヶ月程度でサクッと学べたので逆に経済的だった！（実際に私がオンラインスクールを受講して体感）

では「オススメはどのスクール？」とよく聞かれるのだが、たった１つのおすすめスクールがある訳でなく、その人によって最適なスクールが違う。

スクール選びのポイント

学習スタイルが自分に合っているか？
低価格でコスパの良い学習料金か？
講師に質問しやすい環境か？
無料体験できるスクールか？

数あるスクールの中から、実際に受講してわかった事や現役プロならでは目線で厳選・比較したこちらの記事「現役プロ比較！短期｢WEBデザインスクール12校｣おすすめランキング！」を参考に自分に合ったスクールを探そう↓

▶ 現役プロ比較！短期｢WEBデザインスクール12校｣おすすめランキング！

現役デザイナーが実際にスクールを２校受講した経験を元に徹底比較調査した、WEBデザインスクールランキング！まず最初に実際…

まとめ

今回は解説した@mixin（ミックスイン）は、Sassを便利に使いこなす為の重要な機能と言えるので、理解できるまで、実際にコードを書きながら試してみよう！

Sassの基本をもっと学びたい方は、こちらの記事「Sassを基礎から学ぶ」を参考にしておこう。

やはりWEBの学習は「基礎」が一番重要！「時間をかけてしっかり」と基礎を固める事で、実際の仕事の案件の時に「基礎がしっかりしている」と、そこから応用が効いて、たいていの問題は解決するので、不安にならずに済むのだ。

しかし時間をかけて学ぶのが難しい方や、できるだけ速く習得したい方はプログラミングスクールなどを検討するのもありだろう。私も実際にオンラインプログラミングスクールを利用して、プログラミングを習得したのでその良さを実感している。自分にあったスクールを探したい人は、実際に私が使ったスクールをはじめいくつかおすすめのスクールを比較しているので、こちらの記事を参考になるだろう！

スクールは多少の費用がかかるが、その分早く仕事で稼げて元以上のものを得られるメリットも！一度検討してみるのもありだろう。