みかづきブログ その3

3ヶ月つづけてみました。

Sassでプレースホルダセレクタをつかって、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;
}

となります。



非常に便利ですね。