CSS variables (or custom properties, whichever is more convenient) were originally conceived to store repeating properties, such as color palettes or fonts, in one place. Working with variables in preprocessors is much more flexible, but the magic of SASS/SCSS cannot always be applied. In the real world, we often do without them, which may lead to code bloat, as well as unnecessary files and excess formatting. In this article, we will consider several interesting hacks that allow you to use custom properties for what would seem impossible without preprocessors or JS.

Avoid redefining colors

Defining themes in pure CSS is not the most pleasant experience: switching to a dark palette usually requires changing colors for many elements, i.e. backgrounds, texts, links, buttons, etc. The user’s initial preferences are obtained using the prefers-color-scheme media query, inside which new colors need to be placed for all selectors, which leads to bloating:

There is no other mechanism in CSS to change variables, but repetition can still be avoided with additional values:

If the

--lightvalue is set to initial and the--darkvalue is valid but inapplicable,--backgroundwill get the color #fff. CSS has the value that would be great for this situation, and that’s… the whitespace. Thus, for the light theme, the line will be parsed like this:

And for the dark theme, it will look like this:

Note the spaces – they do not break the syntax (which would reset the entire line definition). Now all that remains is to move the state switch into separate variables:

Now color schemes can be defined in one place, it will look like this:

This code is less descriptive than the classic definition, but it is easy to get used to. It not only saves a lot of space but also reduces the chance of mistakes when changing.

Use switch-case in a language without logic

As we recall, there are no explicit conditionals in CSS, except for media queries, to manipulate the state. But the structure of this language sometimes gives opportunities when no one assumes that. Meet switch-case for animation!

Any number of keyframes (

@keyframes) can be created for theanimationproperty. They can be used as a persistent store of state if you keep the animation paused. You need to know the exact delay for each frame so that the paused animation shows the required moment instead of being fixed on the first frame. Here’s a good example:https://jsfiddle.net/keb1f5g7/1/

Let’s analyze the principle of work:

• The animation is paused with animation-play-state: paused.
• A negative delay in animation-delay causes the animation to stop at a specific frame (or between two specific frames, as the gradient of the first slider works). The slider values ​​range from -100s to 0s.
• In animation-duration, you can specify any convenient number, but you need to remember that when the last frame is being played, the animation turns off. So, the maximum duration should not coincide in time with the last defined frame (case). Therefore, in the example above, the extent of the slider is 100 seconds with a total duration of 100.001s.

Binary logic and the calc() function

In the first trick, we have already used the

--ON--OFFvariables instead of a binary variable. You can use custom properties to store numeric values and get 0 or 1 in a variety of scenarios by using calc() and clamp() to calculate various parameters. The explicit assignment is quite inconvenient for even inverting values, as in the example above, and trying to find some kind of logic here is a total nightmare. It’s good that basic Boolean operations can be performed directly in variable declarations!

#css #scss #sass #html