Member-only story
CSS Variables
The latest specification for CSS introduced a number of new features that are starting to allow us to ditch preprocessors like SASS and others, and go back to pure CSS.
Variables are one such feature. allowing you to create variables just like you would in SASS.
The syntax is a bit different, with the double dash “--“ telling CSS to interpret the property as a variable and the var() CSS function used to call that variable value.
You might notice in the above that the variable is defined in the:root selector. This demonstrates scoping of variables in CSS, one of its most valuable features. If you override the variable at a lower level of specificity, the more specific variable definition is used. This is useful for cases where you want to override variable values when applying a light/dark theme, or for locale-specific styles like text-orientation, anything where variable overrides need to happen for some subset of the styled content.
