みかづきブログ その3

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

SCSS で & (アンパサンド)を活用する

SCSSをつかうとセレクタをネストで書けるようになります。
その際、& ををつかうと1つ親のセレクタを参照できます。


SCSS
.box {
    &.red {
        background:  #dc5252;
    }
}


CSS
.box.red {
    background:  #dc5252;
}
SCSS
.box {
    .blue & {
        background: #65b9c3;
    }
}


CSS
.blue .box {
    background: #65b9c3;
}

DEMO



とても便利ですね。