ネストしたい

:root {
    --color-text-main: black;
    --color-text-active: blue;
}

a {
    display: inline flow-root;
    color: var(--color-text-main);
    text-decoration: none;

    &:hover {
        color: var(--color-text-active);
    }
}

スタイルを入れ子構造で記述できます。 入れ子にすることで、スタイルの適用範囲が分かりやすくなります。

上記サンプルのように、リンクにホバーしたときに文字色を変えたい場合は、書くのがとても楽になりました。

注釈

これまでの書き方だと、以下のようになります。

a {
    display: inline flow-root;
    text-decoration: none;
    color: var(--color-text-main);
}

a:hover {
    color: var(--color-text-active);
}

注釈

Can I useを確認すると、まだブラウザでフルサポートされていません。