The case for CSS variables is interesting. I'm still trying to figure out the best way to integrate them with a CSS framework I created, called Bulma:
https://bulma.io/There's a few ways to combine Sass variables and CSS variables:
- make all Sass variables available as CSS variables as well, so $primary will also exist as --primary
- assign a CSS variable to a Sass one: $primary: var(--red)
- assign a Sass variable that was defined as a CSS one: $red: var(--red) and then $primary: $red
Color functions are one aspect that isn't well supported yet by CSS only.
There's also a more "philosophical" question: why offload the variable resolution to the client side when it can be done at compilation time? If you're not gonna update a variable's value at runtime, it doesn't really need to be available as a CSS variable.
It's like single page apps that always render the same content, and are better off rendered once on the server side and delivered as static HTML, instead of being rendered thousands of times by each client.
But to be fair, CSS variables have other benefits, like creating color variations very quickly:
// Sass
.is-success
background-color: $green-invert
border-color: $green
color: $green
&:hover
background-color: $green
border-color: $green-invert
color: $green-invert
&:active
background-color: $green
border-color: $green
color: $green-invert
// CSS
.is-success
--color: var(--success)
--invert: var(--successInvert)
Even with CSS variables, Sass still has a lot of benefits listed by other commenters here, like reusable mixins and nesting. And one of my favourites: @extend!