CSS Variable Groups

Sassの.Block { &__Element: ... }のように&でCSSカスタムプロパティを拡張するCSS Variable Groupという提案がなされている。

便利そうだけど、&__Selectorと同じようにGrep検索でヒットしなくなるので、ご利用は計画的にって感じ。

Before

:root {
  --color-green-010: ...;
  ...
  --color-green-100: ...;
}

color: var(--color-green-100);

After

:root {
  /* CSS Variable Groupで`--color-green`というprefixに対し、010〜100のsufixをつける */
  --color-green: {
    010: ...;
    ...
    100: ...;
  }
}

color: var(--color-green-100);