SCSS

【SCSS】@mixin/@includeの使い方と使いどころ

本記事では、SCSSの@mixin/@includeの使い方と使いどころについて解説しています。

HTML/CSSの学習におすすめ参考書
1冊ですべて身につくHTML&CSSとWebデザイン入門講座

本書情報
著者Mana
発売日2019/3/16
ページ数280ページ
Kindle版
レビュー
(Amazon)
(2,167件)
先輩くん
先輩くん
Amazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ!
後輩ちゃん
後輩ちゃん
初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね!

綺麗なコードが書けるようになる!
リーダブルコード-より良いコードを書くためのシンプルで実践的なテクニック

本書情報
出版社オライリージャパン
著者Dustin Boswell / Trevor Foucher
発売日2012/6/23
ページ数260ページ
レビュー
(Amazon)
(620件)
先輩くん
先輩くん
より良いコードを書きたい人におすすめの本だよ!
後輩ちゃん
後輩ちゃん
10以上前の書籍ですが、内容は今でも役に立つものばかりです!

@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);
}

無駄な引数が削除され、見やすいコードになりました。

ブログランキング・にほんブログ村へ PVアクセスランキング にほんブログ村