$brandColor: #F06D06;\r\n\r\n.main-header {\r\n color: $brandColor;\r\n}\r\n.main-footer {\r\n background-color: $brandColor;\r\n}<\/code><\/pre>\nThat was the SCSS variant of Sass<\/a>, but all CSS preprocessors offer the concept of variables: Stylus<\/a>, Less<\/a>, PostCSS<\/a>, etc.<\/p>\nThe above code would do nothing in a browser. The browser wouldn’t understand the declarations and toss them out. Preprocessors need to compile into CSS to be used. This code would compile to:<\/p>\n
.main-header {\r\n color: #F06D06;\r\n}\r\n.main-footer {\r\n background-color: #F06D06;\r\n}<\/code><\/pre>\nThis is now valid CSS. The variable was part of the preprocessor language, not CSS itself. Once the code compiles, the variables are gone.<\/p>\n
More recently, native CSS has started supporting CSS variables, or “CSS Custom Properties”. It allows you to work with variables directly in CSS. There is no compiling.<\/p>\n
A simple example of CSS custom property usage is like this:<\/h3>\n:root {\r\n --main-color: #F06D06;\r\n}\r\n\r\n.main-header {\r\n color: var(--main-color);\r\n}\r\n.main-footer {\r\n background-color: var(--main-color);\r\n}<\/code><\/pre>\nThese two demos achieve the exact same thing. We were able to define a color once and use it twice. <\/p>\n
So then… why use one over another? <\/p>\n
Why would you use native CSS custom properties?<\/h3>\n\n- You can use them without the need of a preprocessor<\/strong>.<\/li>\n
- They cascade<\/strong>. You can set a variable inside any selector to set or override its current value.<\/li>\n
- When their values change (e.g. media query or other state), the browser repaints as needed<\/strong>.<\/li>\n
- You can access and manipulate them in JavaScript<\/strong>.<\/li>\n<\/ul>\n
Regarding cascade, here’s a simple example of that:<\/p>\n
:root {\r\n --color: red;\r\n}\r\nbody {\r\n --color: orange;\r\n}\r\nh2 {\r\n color: var(--color);\r\n}<\/code><\/pre>\nAny <h2><\/code> will be orange, because any <h2><\/code> will be a child of <body><\/code>, which has a higher applicable specificity. <\/p>\nYou could even re-set variables within media queries and have those new values cascade through everywhere using them, something that just isn’t possible with preprocessor variables.<\/p>\n
Check out this example<\/a> where a media query changes the variables which are used to set up a very simple grid:<\/p>\n![\"\"](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2016\/10\/grid.gif?ssl=1\")
<\/figure>\nRob Dodson advocates for CSS Custom Properties in CSS Variables: Why Should You Care?<\/a><\/p>\nThe variables that [preprocessors] use suffer from a major drawback, which is that they\u2019re static and can\u2019t be changed at runtime. Adding the ability to change variables at runtime not only opens the door to things like dynamic application theming, but also has major ramifications for responsive design and the potential to polyfill future CSS features.<\/p><\/blockquote>\n
He includes a demo<\/a> where JavaScript changes styles. It doesn’t change the styles on elements directly, it’s just resetting some CSS variables on-the-fly:<\/p>\n![\"\"](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2016\/10\/css-properties.gif?ssl=1\")
<\/figure>\nWes Bos has a demo of this in action as well:<\/p>\n
See the Pen Update CSS Variables with JS<\/a> by Wes Bos (@wesbos<\/a>) on CodePen<\/a>.<\/p>\nNote there is a bunch of stuff about CSS custom properties I’m leaving out here. You can set fallbacks. You can use calc() with them. There are a bunch of cool tricks you can do with them. See the homework section below!<\/p>\n
Why use preprocessor variables?<\/h3>\n\n- The big one: There are no inherit browser support considerations. They compile down into normal CSS.<\/li>\n
- Little stuff: Like you can strip units from a value if you had to.<\/li>\n<\/ul>\n
You could use them together<\/h3>\n
There are pretty compelling reasons to use both. You could absolutely have a CSS preprocessor output CSS custom properties. Ivan Ivanov created a demo that allows you to write using the syntax of CSS custom properties, and through Sass, output code that has fallbacks:<\/p>\n
See the Pen Use CSS4 variables right now<\/a> by $i.van(ov) (@vank0<\/a>) on CodePen<\/a>.<\/p>\nI tend to think that once we can use CSS custom properties without worrying about browser support, that we’d just use them to do all our variable handling. We might still use preprocessors for other conveniences, but the variable handling in native CSS seems so good it’s probably worth just going all-in on that.<\/p>\n
Browser support of CSS Custom Properties<\/h3>\n