Mixin

Mixinで、あらかじめ定義したCSSプロパティの集合を、複数のルールセットに適用することができます。よく使うプロパティセットをMixinできるようにしておけば、定義が重複してしまうのを回避できます。使い方は以下の通り。

• 「=<名前>」で、MixinするCSSプロパティを作成。
• ルールセット内で「+<名前>」とすることで、プロパティを適用できます。

// mixinするプロパティの集合
=test
  color: #333
  border: 1px solid #999

.foo
  // +<名前>でプロパティをmixinできる
  +test
  font-size: 12px

.var
  +test
  font-size: 24px

変換結果です。

.foo {
  color: #333;
  border: 1px solid #999;
  font-size: 12px;
}

.var {
  color: #333;
  border: 1px solid #999;
  font-size: 24px;
}