Sassにおけるextendとincludeの違い | hajipion.com

extendとinclude

Sassって便利ですよね。

入れ子構造、変数、継承、関数……。

この中でも今回は継承関数についてです。

一見使うときにはどちらでも同じことが起こるように思えるので、「ま、どっちでもいっか〜」くらいに使う人が多いかもしれませんが、その微妙な違いをみていきましょう。

コンパイルされたCSSをみれば、違いがわかりやすいと思います。

extendの使い方

まずは継承、extendの方。

extendは、「もともとあるクラスの内容をそのまま使いますよ〜」という機能をもちます。

たとえば、赤色のボックスをつくりたいとき。

使い方としては .box という既存のクラスをつくり、さらにそれを継承して赤色のボックス .boxRed をつくります。

こう書きます。

そうするとコンパイルされるCSSがこちら。

.box というクラス、そして .boxRed の両方がありますね。

そう、extendの一番の特徴はこの「もともとあるクラス」が存在するという点です。

includeの使い方

次にincludeの使い方を見てみましょう。

関数の意味をもつincludeは「意味のまとまりをつくっておいてそれを使いますよ〜」という機能です。

具体的にいえばこんな感じ。同じように赤色のボックスをつくります。

extendみたく .boxRed をつくらずに .box にまとめる感じですね。

吐き出されるCSSはこちら。

シンプルですね!

ちなみに吐き出されたこのCSSのファイルサイズを見てみると、

extend … 83バイト
include … 61バイト

となります。一概にいうのはあれですが、基本的にextendが「既存のクラス」も吐き出す分、ファイルサイズが多くなりますね。

基本mixinをつくってincludeする形でいいと思いますが、「既存のクラス」を別の場所で使うのであれば継承を使いましょう。

つたない説明でしたが、「継承」と「関数」でそもそも概念が違うことがお分かりいただけたら幸いです。

Hajime Hirono

Written by

広野 萌(ひろの はじめ)

@hajipion
ブログは note にお引越ししました

Related Posts

hajipion.com TOP