@mixin（ミックスイン）を使えば、あるスタイルを定義したルールセットの内容を継承しつつ、新しいルールセットを作ることができる。
ここまでは@extendと同じだが、 @mixinは引数を指定して定義した @mixinの一部を変更して使うことができる。これにより、より柔軟な処理が可能になる。
※変数についてはこちらを参考に。
@mixinを使ってみる
@mixinを使って、文字を画像にリプレイス（置き換え）してみよう。
nirというミックスインにリプレイスに必要なプロパティを定義して、.logoからnirに必要な情報を引数として渡して継承する。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
@import "compass"; @mixin nir ($img, $w, $h){ width: $w height: $h; padding:0; margin:0; overflow: hidden; &:before{ content:image-url($img); @include scale(.5); @include transform-origin(0, 0); display:inline-block; font-size:0; line-height:0; } } .logo { @include nir("logo.png", 80px, 80px); } |
↓ ↓ ↓ ↓コンパイル↓ ↓ ↓ ↓
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
.logo { width: 80px; height: 80px; padding: 0; margin: 0; overflow: hidden; } .logo:before { content: url('images/logo.png?1522126163'); -moz-transform: scale(0.5, 0.5); -ms-transform: scale(0.5, 0.5); -webkit-transform: scale(0.5, 0.5); transform: scale(0.5, 0.5); -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -webkit-transform-origin: 0 0; transform-origin: 0 0; display: inline-block; font-size: 0; line-height: 0; } |
ミックスインとして定義したnirには、「$img 」（画像の名前）、「$w 」（画像の幅）、「$h 」（画像の高さ）を引数に持たせている。
次に.logoルールセットで@include nir("logo.png", 80px, 80px);として、nirに引数「logo.png 」（画像の名前）、「80px 」（画像の幅）、「80px 」（画像の高さ）を渡しつつインクルードしている。
※Retinaディスプレイ向けに画像の解像度を倍にするのでcompassでscale(.5);とtransform-origin(0, 0);をインクルードしている。
文字を画像にリプレイスすることが多いページを作る場合には、上記のようなミックスインを用意しておけば、画像の情報を渡してあげるだけで文字のリプレイスが完了してしまう。
アイデア次第で効率化できるルールセットもあるので、探してみると面白いかもしれない。
次回「 @content」