【SASS】入れ子にした中に:hoverを書きたい時【146日目】

CSSだとこう書きたいときに

.class {
    background-color:red;
}

#id.class {
    background-color:blue;
}

.class {
    background-color:red;
}

class:hover {
    background-color:blue;
}

これを入れ子にして見やすく書きたい

&を使う

.class {
    background-color:red;

    &#id {
        background-color:blue;
    }
}

.class {
    background-color:red;

    &:hover {
        background-color:blue;
    }
}

結果

見やすい。

中身が増えていくと、さらに見やすさ実感出来るはず。