みかづきブログ その3

本ブログは更新を終了しました。通算140万ユーザーの方に観覧頂くことができました。長い間、ありがとうございました。

👆

引越し先はこちらです！

Sassでプレースホルダセレクタをつかって、CSSに書き出されないセレクタを書く

CSS

Sass

.btn {
    display: block;
    cursor: pointer;
}

.redBtn {
    @extend .btn;
    width: 160px; height: 90px;
    background-color: red;
}

このSassをコンパイルすると、

CSS

.btn {
    display: block;
    cursor: pointer;
}

.redBtn {
    display: block;
    cursor: pointer;
    width: 160px; height: 90px;
    background-color: red;
}

こうなります。
これがextendです。

しかし、場合によっては .redBtn を書き出すことができれば .btn の書き出しが不要となるときもあるでしょう。その場合はプレースホルダセレクタ（%）をつかいます。

Sass

%btn { // プレースホルダセレクタはCSSには書き出されない
    display: block;
    cursor: pointer;
}

.redBtn {
    @extend %btn;
    width: 160px; height: 90px;
    background-color: red;
}

上記Sassをコンパイルすると、

CSS

.redBtn {
    display: block;
    cursor: pointer;
    width: 160px; height: 90px;
    background-color: red;
}

となります。



非常に便利ですね。