本記事では、SCSSの@mixin/@includeの使い方と使いどころについて解説しています。
- HTMLとCSSの基本が体系的に学べる
- Webデザインの基本が学べる
- 1つのWebサイトを作りながら学べる
ポチップ
先輩くんAmazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ！
後輩ちゃん初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね！
変数名/関数名にもう悩まない！
- 美しいコードが書けるが自然と書けるようになる
- 他の開発者が理解しやすいコードになる
ポチップ
@mixin/@includeの使いどころ
@mixin/@includeは、同じプロパティを使用するHTMLタグ(要素)が複数存在する時に使います。
例えば、使用するプロパティが同じボタンを4つ作りたい場合、@mixin/@includeを使用しないと以下のように記述します。
#btn1 {
width: 100px;
height: 50px;
background-color: orange;
}
#btn2 {
width: 125px;
height: 50px;
background-color: orange;
}
#btn3 {
width: 100px;
height: 25px;
background-color: orange;
}
#btn4 {
width: 100px;
height: 25px;
background-color: red;
}これを@mixin/@includeで書き換えると以下のようになります。
@mixin btn($width: 100px, $height: 50px, $bgColor: orange) {
width: $width;
height: $height;
background-color: $bgColor;
}
#btn1 {
@include btn;
}
#btn2 {
@include btn($width: 125px);
}
#btn3 {
@include btn($height: 25px);
}
#btn4 {
@include btn($bgColor: red);
}重複した記述が消え、かなり見やすいコードになったのが一目瞭然です。
@mixin/@includeの使い方
@mixinと@includeは、ペアで使用します。
まず始めに、@mixinはプロパティと値を予め定義する時に使用します。基本的な使い方は以下の通りです。
@mixin sample() {
/* プロパティと値を指定 */
}@mixinの後に任意の文字列を指定します。どのような時に使用するプロパティと値がセットされているか分かるような文字列を指定するのが良いです。
{}の中には、プロパティと値をセットします。
続いて、@includeは@mixinで定義したものを呼び出したい時に使用します。基本的な使い方は以下の通りです。
#test {
@include sample;
}@includeの後に、呼び出したい@mixinの名前を指定します。
先ほど@mixin sampleで定義したものを呼び出したい時は、上記コードのように「@include sample;」で呼び出すことが出来ます。
@mixinと@includeの基本的な使い方が理解出来たら、実際にSCSSで使用してみましょう。
@mixin btn() {
width: 300px;
height: 75px;
background-color: skyblue;
}
#btn1 {
@include btn;
}
#btn2 {
@include btn;
}上記のSCSSファイルをCSSに変換(コンパイル)すると、
#btn1 {
width: 300px;
height: 75px;
background-color: skyblue;
}
#btn2 {
width: 300px;
height: 75px;
background-color: skyblue;
}@mixinで定義されたプロパティと値が正しく反映されていることが確認できます。
引数の詳しい使い方
@mixin/@includeは、先ほど紹介した基本的な使い方だけでも便利ですが更に引数をセットすることもできます。
引数をセットすることで、渡された値に応じてプロパティ値をそれぞれ変更することが出来ます。
@mixin btn($width, $height, $bgColor) {
width: $width;
height: $height;
background-color: $bgColor;
}
#btn1 {
@include btn(100px, 50px, orange);
}
#btn2 {
@include btn(125px, 60px, #f00);
}#btn1 {
width: 100px;
height: 50px;
background-color: orange;
}
#btn2 {
width: 125px;
height: 60px;
background-color: #f00;
}初期値を指定する
引数をセットした場合、何かしらの値を必ずセットしなくてはいけません。しかし、必ずボタンの背景色はorangeと決められている場合、わざわざ指定するのは面倒くさいです。
そのような時は初期値を指定することで無駄な引数を渡さずに済みます。
@mixin btn($width, $height, $bgColor: orange) {
width: $width;
height: $height;
background-color: $bgColor;
}
#btn1 {
@include btn(100px, 50px);
}
#btn2 {
@include btn(125px, 60px);
}#btn1 {
width: 100px;
height: 50px;
background-color: orange;
}
#btn2 {
width: 125px;
height: 60px;
background-color: orange;
}不要な引数を@includeで指定しない
もし、以下のような@mixinがあった時に背景色だけ「red」に変更したい場合どのように書きますか？
@mixin btn($width: 100px, $height: 50px, $bgColor: orange) {
width: $width;
height: $height;
background-color: $bgColor;
}このように、
#btn1 {
@include btn(100px, 50px, red);
}第一引数・第二引数も指定する方法も間違いではありませんが引数の数が多くなればなるほど面倒くさいです。
このような時は@includeに「引数名:変更したい値」の形式で記述します。
#btn1 {
@include btn($bgColor: red);
}無駄な引数が削除され、見やすいコードになりました。
