Search code examples
csscss-variables

CSS variables: Sugar syntax exists?

Instead writing:

:root {
    --pc: gray;
    --sc: lightgray;
}

var(--pc)

Is there an even shorter syntax, at least shorter than var(--pc)?

Solution

  • No, there isn't. The var() notation is there so the CSS parser can distinguish a custom property expression from any other identifier in a style declaration (in much the same way the calc() notation exists to distinguish arithmetic expressions) as well as providing a way to specify a fallback, while maintaining compatibility with preprocessors that already have their own variable reference notations.