On to day 3 of Javascript 30. This one is about CSS variables. Of course there have been variables and what-not available in SCSS and SASS and all those sort of pre-processor based CSS frameworks for quite some time, but I didn’t know there were variables available in CSS now. I also didn’t know about the html range input type. I’ve looked and there’s now a bunch of “new” types, although who knows how new. I’ve been concentrating more on the backend since back in the day with Javascript was more of a toy than much of something that could do useful things with a website.

For this exercise there’s a couple of range inputs and a color input. You wire up a change and a mousemove event listener so that whenever the sliders or the color input change, you can grab those values and then you can update the CSS variables within the document.

It turns out that not only can you do this and it’s pretty cool, you can even adjust variables at different levels in the DOM. Setting the variables at the full document level works, but you can also set them at lower levels to different values and they will take effect for the parts of the DOM where that setting is more specific. I don’t think I’m making this very clear, but it’s pretty cool.

In the example, there’s an h1 header containing a span using a variable for color and in another area there’s an image using that same variable. If you set the variable at the document level, both the h1 span and the image border will be set to that color. However, if you also set the same variable but at the h1 level, the span will use that color as it is more specific than the document level variable, similar to the CSS cascade.

On to Day 4!