SassのExtendはなぜオススメされないのか

今回はSassの書き方の一つであるExtendについて、使いどころを調べてみたので紹介します。

scssのコンパイルはVisual Studioの拡張機能であるWebCompiler 1.11.326を使用しています。

Extendとは

定義済みのスタイルを継承して新しいスタイルを作れる書き方です。
当然ですがこの書き方はコンパイルするとcssに出力されます。

コンパイル前

.input-row {
    display: flex;

    span {
        width: 100px;
    }
}


.sample1 {
    @extend .input-row;
}

コンパイル後

.input-row, .sample1 {
    display: flex;
}

    .input-row span, .sample1 span {
        width: 100px;
    }

プレースホルダセレクタ

extendしたいスタイルの先頭に%を付与します。
この書き方をするとextendする元の定義はcssへは出力されません。
extendのためだけに宣言する場合などは便利ですね。

コンパイル前

%input-row {
    display: flex;

    span {
        width: 100px;
    }
}


.sample1 {
    @extend %input-row;
}

コンパイル後

.sample1 {
    display: flex;
}

    .sample1 span {
        width: 100px;
    }

なぜオススメされないのか

これだけを見ると非常に便利に見えるextendですが、いろいろなサイトではMixInとの使い分けで、Extendはあまり推奨されない記載を拝見します。

それはなぜか。
以下の%input-rowを10回Extendした場合

%input-row {
    display: flex;

    span {
        width: 100px;
    }
}

.sample1 {
    @extend %input-row;
}

.sample2 {
    @extend %input-row;
}

// sample10まで続く

出力されるcssは以下のようになります。

.sample1, .sample2, .sample3, .sample4, .sample5, .sample6, .sample7, .sample8 {
    display: flex;
}

    .sample1 span, .sample2 span, .sample3 span, .sample4 span, .sample5 span, .sample6 span, .sample7 span, .sample8 span {
        width: 100px;
    }

上記の通り、大量のセレクタがグルーピングされます。
今回の例はExtend元が２段階のネストですが、ネストが深くなると何倍ものセレクタが生成されることになります。

これではとてもデバッグできませんし、出力されたcssの解析など不可能です。
これが一番の要因かなと思います。

Extendの使いどころ

それではExtendは使いどころがないのか？
個人的には安全で、より多機能なMixInを使いますがあえて使うなら
同一コンポーネント内など限られたスコープで使用するのが良いのでしょう。
以下はコンポーネントに絞って使用した例で、良い例と言えます。

.button,
%button {
    display: inline-block;
    padding: 1em;
}

.button-warning {
    @extend %button;
    background-color: yellow;
    color: black;
}

.button-error {
    @extend %button;
    background-color: red;
    color: white;
}

.button-gray {
    @extend %button;
    background-color: lightgray;
    color: black;
}

コンパイル後

.button,
.button-warning,
.button-error,
.button-gray {
    display: inline-block;
    padding: 1em;
}

.button-warning {
    background-color: yellow;
    color: black;
}

.button-error {
    background-color: red;
    color: white;
}

.button-gray {
    background-color: lightgray;
    color: black;
}