Sassで@mixin

 @mixin（ミックスイン）を使えば、あるスタイルを定義したルールセットの内容を継承しつつ、新しいルールセットを作ることができます。
ここまでは@extendと同じですが、 @mixinは引数を指定して定義した @mixinの一部を変更して使うことができます。これにより、より柔軟な処理が可能になります。
※変数についてはこちらを参考に。

@mixinを使ってみる

@mixinを使って、文字を画像にリプレイス（置き換え）してみましょう。
nirというミックスインにリプレイスに必要なプロパティを定義して、.logoからnirに必要な情報を引数として渡して継承します。

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

↓ ↓ ↓ ↓コンパイル↓ ↓ ↓ ↓

.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」