Sass：includeはやめてextendを使おう

とはいってもincludeもまたメリットはあるのですが、extendを正しく理解して使いこなせばソース容量が減り、サイトのパフォーマンスが改善に繋がります。

前からしつこくextendに関する内容を書いていますが、それだけメリットがあるので使いこなしてほしいためです。

includeの場合

@mixin border-radius-3 {
    @include border-radius(3px);
}
.test {
    @include border-radius-3;
    display: block;
    width: 100px;
}

例として「border-radius-3」というmixinを作り、クラス「.test」でincludeしています。
border-radiusの設定を共有したいための書き方ですね。

CSSに出力すると下記のようになります。

.test {
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
  display: block;
  width: 100px;
}

ベンダープレフィックス付きなので長くなりますね。

includeで呼び出すと、クラスの中にmixinの記述が全てコピーされる形です。

extendの場合

.border-radius-3 {
    @include border-radius(3px);
}
.test {
    @extend border-radius-3;
    display: block;
    width: 100px;
}

includeの場合はmixinで定義していた「border-radius-3」をクラスとして記述しています。
extendはmixin定義ではなく定義されているクラスを指定して使いますが、一見include記述に大きな差はありませんね。

CSSに出力すると下記のようになります。

.border-radius-3, .test {
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
}

.test {
  display: block;
  width: 100px;
}

includeの場合と異なり、「border-radisu-3」もクラスとして記述しているのでCSSに出力されます。

そして「border-radisu-3」のプロパティが「.test」もセレクタとして定義されており、「.test」単体の定義にborder-radiusの記述はありません。「.test」のみではなく他のクラスも「border-radisu-3」をextendして利用した場合、includeより記述量が減るのは明確に分かるかと思います。

extendはこうしたメリットがあり、オブジェクト指向CSSが組みやすくなりますので正しく理解して使い分けをオススメします。