More than 3 years have passed since last update.

Sassで出来ること【vol.5】mixin(ミックスイン)

Last updated at 2020-05-26Posted at 2020-05-26

Sass勉強中の為、出来ることを備忘録がてら纏めて書いていきます。

#mixinミックスイン

scssではmixin(ミックスイン)機能を使用して、cssのスタイルを定義しておいて別の場所でそのスタイルを使いまわすことが出来ます。「継承」と似ていますが若干の違いがあります。

mixinの基本的な使用方法の例です。
「mixin」で定義し「include」で使用します。

.scss

@mixin hoge{
   border:1px solid #ccc;
   padding:15px;
}
.huga{
   @include hoge;
   background-color: #eee;
}

cssに変換するとこの様になります。

変換後の.css

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

mixinで定義したスタイルも.hugaに反映されています。
ただ、これだと継承とあまり変わりませんね。。

#引数を使用したmixin

継承との違いとして、mixin機能は引数を使用することが出来ます！
引数を変数にすることでより便利にmixin機能を使用することが出来ます。

.scss

@mixin hoge($color){
   border:1px solid $color;
   padding:15px;
}
.huga{
   @include hoge(#ccc);
   background-color: #eee;
}

cssに変換するとこの様になります。

変換後の.css

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

また、引数に初期値を指定しておくことが出来ます。

.scss

@mixin hoge($color:#ccc){
   border:1px solid $color;
   padding:15px;
}
.huga{
   @include hoge();
   background-color: #eee;
}

cssに変換するとこの様になります。

変換後の.css

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

初期値の上書きも可能です。
includeの際 hoge(#fff)と指定してcssに変換すると、

変換後の.css

.huga {
   border:1px solid #fff;
   padding:15px;
   background-color: #eee;
}

渡した引数「#fff」で初期値の「#ccc」が上書きされました。
基本のスタイルを決めておき、バリエーションで変化させる際に重宝します！