Sassのミックスインは関数的な働きをするもので、引数で指定した値を利用しながらスタイルを柔軟に定義できます。
ミックスインは「@mixin」で定義をして、「@include」で呼び出しをします。
ミックスインの書き方
プロパティ:$value1;
プロパティ:$value2;
}
ミックスインの呼び出し方
@include ミックスイン名(値1,値2);
}
実例
次のサンプルは画像を水平方向と垂直方向の中央に表示させるものです。
ミックスインを使ったサンプル
HTMLコード
<div class="main">
<h2>Cake</h2>
<img src="cake_s.jpg" alt="cake">
</div>
ミックスインの引数に画像の幅と高さを入れれば中央に表示されるようなプロパティを設定します。
親要素の.mainを基準にabsoluteでtopとleftを50％にすることで画像の左上を基準にして垂直方向と水平方向の中心に画像を持ってくることが可能です。
けれどもこれだけでは正確に中央にはなりません。画像の基準点が左上だからです。画像の基準点を画像の中心に移動するためにネガティブマージンで画像の幅と高さの半分だけ移動させればOKです。
これらのプロパティをcenterという名前のミックスインに作成しておくことで、毎回面倒なプロパティ設定をしなくても、使い回しできるようになるわけです。
- 除算の場合は括弧で囲む決まりがありましたが、変数の除算の場合は括弧は必要ありません。
- vw,vhの単位はビューポートに対する割合になります。vw,vhについては、こちらを参考にしてください。
Sassコード
[sass]
@mixin center($width, $height){
position:absolute;
top:50%;
left:50%;
margin-left:$width / -2;
margin-top:$height / -2;
}
.main{
position:relative;
width:80vw;
height:60vh;
margin:auto;
background-color: #F8FBD4;
h2{
color:#fff;
text-align: center;
}
img{
@include center(300px, 201px);
}
h2{
background-color: #F0C019;
}
}
[/sass]
コンパイル後のCSSは次のとおりです。
CSSコード
.main {
position: relative;
width: 80vw;
height: 60vh;
margin: auto;
background-color: #F8FBD4;
}
.main h2 {
color: #fff;
text-align: center;
}
.main img {
position: absolute;
top: 50%;
left: 50%;
margin-left: -150px;
margin-top: -100.5px;
}
.main h2 {
background-color: #F0C019;
}
ミックスインでさまざまなパーツの定義をしておくことで作業の効率化が図れます。また、Tipsをまとめておけるので重宝します。
例えばBootstrapのダウンロードページではSassファイルをダウンロードできるようになっています。Bootstrap3はLessが使われていますが、Sassファイルも用意してくれています。
こちらをダウンロードして展開したファイルに「stylesheets」フォルダがあります。stylesheets/bootstrap/mixinsと少し階層の入り込んだ中に「mixins」フォルダが用意されています。このフォルダにはさまざまなパーツの@mixinがあります。それぞれのパーツをどのようにデザインしているか参考になりますので一度確認しておくと良いでしょう。
