みかづきブログ その3

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

👆

引越し先はこちらです!

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

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


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


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


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

DEMO



とても便利ですね。