I generally use Sass when I’m working on a web project these days, but one of the things that has always bothered me with Sass/LESS variables is that I can’t set them within the scope of a media query. I’ve often found myself working on large scale, responsive applications that would benefit from being able to simply redefine the value of a Sass variable or two based on the screen size.

CSS variables allow you to do just that. You can set a variable for a standard value to be applied to a variety of element properties across an application, but on different screen sizes, have that value be different without having to put those media queries all over the place.

So instead of this:

$mobile-spacing: 10px;

$desktop-spacing: 20px; .element-1 {

padding: $mobile-spacing;

@media (min-width:601px) {

padding: $desktop-spacing;

}

} .element-2 {

margin-bottom: $mobile-spacing;

@media (min-width:601px) {

margin-bottom: $desktop-spacing;

}

}

You can do this:

:root {

--spacing: 10px;

@media (min-width:601px) {

--spacing: 20px;

}

} .element-1 {

padding: var(--spacing);

} .element-2 {

margin-bottom: var(--spacing);

}

This concept can be used to make many responsive/mobile improvements with ease, such as adjusting line height, margins, and color across an application for mobile readability.

If it helps anyone out, here’s the super lame CodePen I used for experimenting with CSS Variables:

As you can see in the CodePen, CSS variables can also be paired nicely with Sass/LESS variables if you’re used to those or already have them implemented in a current project.

Though these new CSS variables aren’t supported in IE at this point, I think this benefit is enough for me to use them in some projects where appropriate. Let me know if you think this is as awesome of a feature as I do.