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

一般社団法人デザインシップ代表。早稲田大学卒業後、ヤフー株式会社入社。2015年、オンライン証券「FOLIO」を共同創業。Chief Design Officerに就任。2018年、一般社団法人デザインシップ設立。代表理事に就任。法律・医療・自動運転・エンタメ・ARなど幅広い業界の新規事業立ち上げ・デザインを支援。ラジオ番組「ブレインストーミング」隔日更新中。

» 経歴・受賞歴・ポートフォリオ

Related Posts

hajipion.com TOP