The same way you can’t make changes to preprocessed variables inside @media queries, you can’t make changes to them inside @keyframes either. CSS custom properties don’t have the same limitation and can be combined with transitions, transforms, and @keyframe animation for some interesting results.
Category: CSS
CSS Custom Properties—Dynamic Changes With And Without Javascript
Have you ever wished you could change the value of a Sass or Less variable after your page has loaded? I have. Unfortunately, it’s not something you can do as the variables cease to be variables once the preprocessed code is compiled into CSS. You don’t have the same limitation with CSS custom properties.
CSS Custom Properties, Media Queries, And Responsive Design
One thing you can do with CSS custom properties that you can’t do with variables in preprocessors is redefine them and assign new values inside @media queries. It’s a useful ability to have and one more reason why you’d want to work with what are effectively native CSS variables.
How To Use CSS Custom Properties To Write More Readable Code
Before being interrupted by the birthday of the United States, I was talking about CSS custom properties, which if you remember, allow you to create variables directly in CSS instead of having to use preprocessors.
How To Define And Use CSS Custom Properties
A few years ago I offered a quick look at CSS custom properties, which provide a way to define and use variables directly in CSS. At the time the only browser with support was the nightly build of Firefox. Given the lack of support and that we could already use preprocessors like Sass to write variables, I promptly forgot all about custom properties after writing the post.