SassのMixin&includeとExtend

Sassからは完全に離れられなくなっているけれど、なにげなく使っているMixinやextend. ここでいったん整理しておくとする。

mixin & include

共通の関数のようなもの。引数も定義でき、抽象化してDRYにかけるようになる。

@mixin box_shadow($value) {
  -webkit-box-shadow: $value;
  -moz-box-shadow: $value;
  box-shadow: $value;
}

import 'pathtomixin';
.button {
    @include box_shadow(100px);
}

extend

継承。既存のcssを拡張して使える。

.text {
    font-size: 12px;
}
.title {
    @extend .text;
    font-weight: bold;
}

includeとextendの違い

なぜ @kotarok さんは mixin より extend を推すのか

名前のとおりだが、includeは複製をつくる, extendは継承して使うということで、どっちでもできる場合もあるが、まずひとつ、outputが明確に違う。

あとmixin&includeは変数が使える。

最近あったミス

extendはあくまで同ファイル上に展開されたものを継承するものなので、railsの場合、assetspiplineで同一ファイルにされるからといって、他のファイルにあるものをextendしようとしてもできません。 わかっちゃえば当たり前だけど最初は気づきにくかったので。

なのでclearfixとかbuttonとかはextendでなく共通のmixinに入れて、必要なファイルでimportしておく感じにしましょう。