extendとinclude
Sassって便利ですよね。
入れ子構造、変数、継承、関数……。
この中でも今回は継承と関数についてです。
一見使うときにはどちらでも同じことが起こるように思えるので、「ま、どっちでもいっか〜」くらいに使う人が多いかもしれませんが、その微妙な違いをみていきましょう。
コンパイルされたCSSをみれば、違いがわかりやすいと思います。
extendの使い方
まずは継承、extendの方。
extendは、「もともとあるクラスの内容をそのまま使いますよ〜」という機能をもちます。
たとえば、赤色のボックスをつくりたいとき。
使い方としては .box という既存のクラスをつくり、さらにそれを継承して赤色のボックス .boxRed をつくります。
|
1 2 3 4 5 6 7 8 |
.box { width: 100px; height: 100px; } .boxRed { @extend .box; background: red; } |
こう書きます。
そうするとコンパイルされるCSSがこちら。
|
1 2 3 4 5 6 7 |
.box, .boxRed { width: 100px; height: 100px; } .boxRed { background: red; } |
.box というクラス、そして .boxRed の両方がありますね。
そう、extendの一番の特徴はこの「もともとあるクラス」が存在するという点です。
includeの使い方
次にincludeの使い方を見てみましょう。
関数の意味をもつincludeは「意味のまとまりをつくっておいてそれを使いますよ〜」という機能です。
具体的にいえばこんな感じ。同じように赤色のボックスをつくります。
|
1 2 3 4 5 6 7 8 |
@mixin createBox($color) { width: 100px; height: 100px; background: $color; } .box { @include createBox(red); } |
extendみたく .boxRed をつくらずに .box にまとめる感じですね。
吐き出されるCSSはこちら。
|
1 2 3 4 5 |
.box { width: 100px; height: 100px; background: red; } |
シンプルですね！
ちなみに吐き出されたこのCSSのファイルサイズを見てみると、
extend … 83バイト
include … 61バイト
となります。一概にいうのはあれですが、基本的にextendが「既存のクラス」も吐き出す分、ファイルサイズが多くなりますね。
基本mixinをつくってincludeする形でいいと思いますが、「既存のクラス」を別の場所で使うのであれば継承を使いましょう。
つたない説明でしたが、「継承」と「関数」でそもそも概念が違うことがお分かりいただけたら幸いです。
