Sassメモ：@mixin と @include でCSSプロパティを楽に統一しよう

似たようなスタイルのパターン違いを作る時など、同じプロパティを書くのは手間なので @mixin と @include で楽しましょう。
下記はSass記法例。

@mixin boxSize() {
  width:200px;
  height:100px;
}
.box1 {
  @include boxSize();
  background-color:#f00;
}
.box2 {
  @include boxSize();
  background-color:#0f0;
}

@mixin で定義し、 @include で呼び出す形です。
CSS側には下記のように展開されます。

.box1 {
  width:200px;
  height:100px;
  background-color:#f00;
}
.box2 {
  width:200px;
  height:100px;
  background-color:#0f0;
}

ちなみに引数も使えます。

@mixin boxSize($w, $h) {
  width:$w+px;
  height:$h+px;
}
.box1 {
  @include boxSize(300,200);
  background-color:#f00;
}

box-sizing や border-radius など、ベンダープレフィックスが必要なCSSプロパティは @mixin で作っておくと楽になります。
有名どころのCSSフレームワークは下記のように大体同じ記述で対応しています。

@include box-sizing(border-box);
@include border-radius(5px);