How To Use CSS Custom Properties With Transitions, Transforms, and Animations

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.

Continue reading

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.

Continue reading

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.

Continue reading

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.

Continue reading

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.

Continue reading