{"id":274807,"date":"2018-12-05T07:38:34","date_gmt":"2018-12-05T14:38:34","guid":{"rendered":"http:\/\/css-tricks.com\/?p=274807"},"modified":"2018-12-06T08:26:54","modified_gmt":"2018-12-06T15:26:54","slug":"dry-switching-with-css-variables-the-difference-of-one-declaration","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/dry-switching-with-css-variables-the-difference-of-one-declaration\/","title":{"rendered":"DRY Switching with CSS Variables: The Difference of One Declaration"},"content":{"rendered":"

This is the first post of a two-part series that looks into the way CSS variables can be used to make the code for complex layouts and interactions less difficult to write and a lot easier to maintain. This first installment walks through various use cases where this technique applies. The second post<\/a> covers the use of fallbacks and invalid values to extend the technique to non-numeric values.<\/p>\n

What if I told you a single CSS declaration makes the difference in the following image between the wide screen case (left) and the second one (right)? And what if I told you a single CSS declaration makes the difference between the odd and even items in the wide screen case?<\/p>\n

\"On
Screenshot collage.<\/figcaption><\/figure>\n

<\/p>\n

Or that a single CSS declaration makes the difference between the collapsed and expanded cases below?<\/p>\n

\"Animated
Expanding search.<\/figcaption><\/figure>\n

How is that even possible?<\/p>\n

Well, as you may have guessed from the title, it’s all in the power of CSS variables.<\/p>\n

There are already plenty of articles out there on what CSS variables are and how to get started with them, so we won’t be getting into that here.<\/p>\n

Instead, we’ll dive straight into why CSS variables are useful for achieving these cases and others, then we’ll move on to a detailed explanation of the how<\/em> for various cases. We’ll code an actual example from scratch, step by step, and, finally, you’ll be getting some eye candy in the form of a few more demos that use the same technique.<\/p>\n

So let’s get started!<\/p>\n

Why CSS variables are useful<\/h3>\n

For me, the best thing about CSS variables is that they’ve opened the door for styling things in a logical, mathematical and effortless way.<\/p>\n

One example of this is the CSS variable version of the yin and yang loader<\/a> I coded last year. For this version, we create the two halves with the two pseudo-elements of the loader element.<\/p>\n

\"Animated
Rotating ☯ symbol, with its two lobes increasing and decreasing in size.<\/figcaption><\/figure>\n

We use the same background<\/code>, border-color<\/code>, transform-origin<\/code> and animation-delay<\/code> values for the two halves. These values all depend on a switch variable --i<\/code> that’s initially set to 0<\/code> on both halves (the pseudo-elements), but then we change it to 1<\/code> for the second half (the :after<\/code> pseudo-element), thus dynamically modifying the computed values of all these properties.<\/p>\n

Without CSS variables, we’d have to set all these properties (border-color<\/code>, transform-origin<\/code>, background<\/code>, animation-delay<\/code>) again on the :after<\/code> pseudo-element and risk making some typo or even forgetting to set some of them.<\/p>\n

How switching works in the general case<\/h3>\n

Switching between a zero and a non-zero value<\/h4>\n

In the particular case of the yin and yang loader, all the properties we change between the two halves (pseudo-elements) go from a zero value for one state of the switch and a non-zero value for the other state.<\/p>\n

If we want our value to be zero when the switch is off (--i: 0<\/code>) and non-zero when the switch is on (--i: 1<\/code>), then we multiply it with the switch value (var(--i)<\/code>). This way, if our non-zero value should be, let’s say an angular value of 30deg<\/code>, we have:<\/p>\n