Sass variables vs CSS custom properties
We had had variables in CSS pre-processors like Sass for a long time. They were used in a way variables are used in any programming language. Then we had CSS custom properties come out. They were met initially as a native CSS replacement for Sass variables. However, this was not the case.
Both CSS custom properties and Sass variables allow you to define some re-usable value to later use it in the styles. However, this is basically all for the similarity.
In contrary to Sass variables, custom properties do stay in the CSS code and they are defined using a special --variable-name syntax that browsers recognize. They should be defined on an HTML element to be in power, while Sass variables are replaced with their actual values at compile time.
Another great thing about CSS custom properties is that they are inherited, meaning you would usually define them once on a :root element (html tag for the document) and then can be used anywhere on the page using var(--variable-name, <default_value>) syntax (default_value is optional and is used to handle cases when there is no such variable or its value is invalid).
While Sass variables enable you to reuse common values, CSS custom properties empower you building highly customized Web Components. They also enable you building themes that change the appearance with just few lines of code. In Sass you would have to re-define rules for your components in order to turn on some other theme. With CSS custom properties this is no longer the case. You only need to override the values of the custom properties and the rest of the document will “magically” change its colors. This does require you to build the variables thoughtfully in order to do such live toggles, but nonetheless is a great and powerful tool towards having UI libraries where you don’t have to fight its default styles, but only need to provide some CSS custom properties and they will be inherited.
If looked at the example above it may seem like a subtle difference between the approaches. However, if looked closer one could notice that we don’t re-define the styles for the dark theme on the button. We only update the variables. This way implementation is written once and the dynamic variables update should the theme change. On the other hand if we were to use Sass we would need to write an override for every single component that has to have multiple themes.
Furthermore, adding more theme with custom properties is just adding another list of variables declarations and that’s it. With Sass variables you would have to go over all components that you have in your design system.
It’s worth mentioning that despite it becomes easier to add themes to your components with CSS custom properties it does require you to put some work towards variables names and conventions. Just like you have to do with any other highly flexible system. Without strict rules you are less likely to consume all those benefits.
