Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
20
Help us understand the problem. What is going on with this article?

More than 3 years have passed since last update.

@Shinji-Hashimoto

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元が2段階のネストですが、ネストが深くなると何倍ものセレクタが生成されることになります。

これではとてもデバッグできませんし、出力された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;
}
20
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
20
Help us understand the problem. What is going on with this article?