CSS Custom Properties (variables)

CSS Custom Propeties allow us to do many things with CSS that we used to rely on pre-processors for (like LESS and SASS). These custom properties are now supported by modern browsers (latest versions of Firefox, Chrome, Edge, and Safari). IE 11, not so much. Therefore, make certain you view this page in a modern browser.

Note that CSS custom properties always begin with two hyphens (--). This differs from how variables are defines in both LESS and SASS.

If the value of a CSS declaration changes (perhaps when working with media queries), one may wish to use CSS custom propertis. These can be a good way to separate logic from design.

Some CSS concepts

before we delve too far down this rabbit hole, you may not be aware of some of the recent CSS capabilities. Let's examine some of these in a bit more detail.

• :root - this is a CSS pseudo-class which matches the root element (html) of the document. It is identical to the html selector but it has a higher specificity. For more information, please examine the MDN site.
• var() function - this is not to be confused with JavaScript (spoiler alert, I recommend using let an const instead of var when crating JavaScript variables). This is used to insert a CSS custom property into the value of anothr CSS property. Again, you can find out more about this at the MDN site.
• calc() function - this allows you to perform calculations when defining CSS property values. Again, you will find much more information about this at the MDN site. Yes, each of my references to the MDN site takes you to the specific page in question. You can use calc() to convert numbers to units at runtime. Of course, if there are any errors (such as trying to use "fred" as a number, the CSS will fail (and be ignored).

All the examples provided on this page rely on the embedded style (so you just need to view the source code of this specific page). Obviously, I recommend using a linked style sheet when working in a production environment (instead of this teaching envrionment).

Example 1 - changing text color using CSS custom properties

Let's see what we can do with the text color. As you see, the default color is black for this page. But, what if we add a little CSS (as shown below).

		html {
			--webProBlue: #3f6aa1;
		}
		.textColor {
			color: var(--webProBlue);
		}

Now, when we see this paragraph, the color is dynamically changed to Web Professionals blue.

Example 2 - changing the background to a gradient using a little math and some CSS custom properties

Of course, we can also expand upon this. Note the changes below. In this case, we set up a number of custom properties (such as hue, saturation, and luminosity), then multiply hue with calc to create a new hue. We finally create a new color using the custom properties we defined and calculated. Lastly, we set this as a linear gradient for the background of a paagraph. How cool is this.

		html {
			--webProBlue: #3f6aa1;
			--hue: 30;
			--saturation: 40%;
			--luminosity: 50%;
			--alpha: 0.7;
			--newHue: calc(var(--hue)*2);
			--newColor: hsl(var(--newHue), var(--saturation), var(--luminosity), var(--alpha));
		}
		.textColor {
			color: var(--webProBlue);
		}
		.bgColorExample {			
			background: linear-gradient(to top, var(--webProBlue), var(--newColor));
			line-height: 3em;	
		}

Now let's examine what happens to this text as we apply the above CSS.

Example 3 - using custom properties with media queries

One more example, This time, we define a media query and change the value of the text in a span (depending on whether the resolution is less than 500px or not). Here is the CSS custom properties to make this happen.

			html {
             ...
			 
             --span-color: red;
		}
			 ...
			 
		@media screen and (max-width: 500px) {
			span { --span-color: brown; }
		}	
		
		span {
			color: var(--span-color);
		}
	

Here is some text with some additional text in a span tag. Let's see the effect as we change the width of the page from a desktop setting to something smaller (less than 500 px). If this is working properly, the color of the text within the span tag will be red unless the screen resolution is less than 500 pixels (and it will then be brown).