Variables used to be one of the most requested features for CSS, particularly from programmers accustomed to languages with variables. But, between then and now, CSS preprocessors like SASS and LESS have largely filled the role by offering variables (and more). Still SASS and LESS are not CSS, and do require compiling, so there may still be a place for variables in CSS.

There’s nowhere to actually test out CSS variables yet, but you can read up on the proposed variable syntax at the W3C. The spec is currently a working draft and may change considerably before it is finalized, but the proposed syntax looks like this:

The first rule is the new variable syntax and defines a property named “var-header-color” on the root element. Then you can use that variable throughout your stylesheets with the var(header-color) syntax. Also note that you can use variables within variables like this:

The bad news is that variables aren’t backwards-compatible at all. Older browsers will simply ignore them (right now all browsers will ignore them) and if you’re defining key elements like background colors with variables the results in older browsers won’t be pretty. Eventually old browsers will fade away and CSS variables will probably become commonplace, but for the next few years at least we suggest looking to a preprocessor if you simply must have your variables.

Here’s The Thing With Ad Blockers

We get it: Ads aren’t what you’re here for. But ads help us keep the lights on. So, add us to your ad blocker’s whitelist or pay $1 per week for an ad-free version of WIRED. Either way, you are supporting our journalism. We’d really appreciate it.