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しておく感じにしましょう。