Home / CSS3 / 5 Examples to Explain CSS Variables
4 minutes read
232 Views
css variables

This article’s goal is to demonstrate how native CSS variables function and how you can utilise them to make your life easier. As your web programmes become more complex, the CSS becomes more bloated, redundant, and, in some cases, messy. CSS variables, when used correctly, provide a means for reusing and changing frequently occurring CSS properties.

We have pre-processors like Less and Sass before “the pure” CSS supporting variables. However, they required compilation before use, which added an extra layer of complexity (in some cases).

CSS Variables: How to Define and Use Them

Let’s start with something you’re probably already familiar with: JavaScript vars.

You’ll write something like this to declare a simple JavaScript variable:

let myColor = "green";

A double dash must be added before the name of a CSS variable to define it.

body {
    --english-green-color: #1B4D3E;
}

We can now use the var(…) function to access the value of the CSS variable.

.my-green-component{
    background-color: var(--english-green-color);
}

Declaring your CSS variables in the:root pseudo-class is the simplest approach to manage them. Because CSS variables follow the same rules as any other CSS specification, including them in the:root ensures that all selectors will have access to them.

:root{
    --english-green-color: #1B4D3E;
}

Browser support for CSS variables ?

The support for CSS variables in browsers isn’t awful at all. If you check at Can I Use CSS Variables, you’ll notice that all of the major browsers support CSS variables out of the box. On both mobile and desktop.

If many of your users (still) use Internet Explorer, be sure to provide a fallback.

Let’s build stuff!

Let’s have a look at how these CSS variables work in practise:

Example 1 — managing colors

The colors of your design are by far one of the best possibilities for CSS variables. Rather than copying and pasting the same colors over and over, we may save time by storing them in variables.

Simply change the value of the CSS variable if someone asks us to update a specific shade of green or make all of the buttons red instead of blue. You won’t have to go through the trouble of finding and replacing every instance of that hue.

Example 2 — removing duplicate code

Frequently, you’ll need to create a few alternative variants of the same component. The basic styles are the same, although they are slightly different. Let’s have a look at a case with some coloured buttons.

The most common solution is to construct a basic class, such as.btn, and then add the variant classes to it.

.btn {
  border: 2px solid black;
  // more props here
}
.btn:hover {
  background: black;
  // more props here
}
.btn.red {
  border-color: red
}
.btn.red:hover {
  background: red
}

Now put them together like this:

<button class="btn">Hello</button>
<button class="btn red">Hello</button>

This, however, will result in some code duplication. Both the border colour and the background colour for the.red variation must be red.
With the help of a CSS variable, this may be simply corrected.

.btn {
	border: 2px solid var(--color, black);
}
.btn:hover {
	background: var(--color, black);
}
.btn.red {
	--color: red

Example 3 — making some attributes readable by humans

If we want to construct a shortcut to a more sophisticated property value so that we don’t have to memorise it, we can utilise CSS vars.
Box-shadow, transform, and font, as well as other CSS rules with many arguments, are excellent examples.
We can save the property in a variable and reuse it in a more human-friendly manner.

Example 4 — cascading the variables

The CSS Variables are subject to the same cascade rules as the rest of the website.
As a result, if a custom property is stated numerous times in a CSS file, the CSS file’s lowest definition takes precedence over the ones above it.
The following example shows how simple it is to dynamically alter properties based on user action while maintaining clean and succinct code.

Example 5 — Theme switcher with CSS Variables

One of the best things about CSS variables is how responsive they are. As soon as we change them, whichever property has the CSS variable’s value is also changed. We can create a theme switching mechanism with just a few lines of Javascript and the clever use of CSS Variables.

I hope you found this information interesting.

So, what do you have to lose? Please try using CSS variables and let me know what you think.

Read More:


Post author

A bright, talented, ambitious and self-motivated 💻 Freelancer, ⌨ Programmer, JavaScript and Typescript lover 📍

  Tweet It


All Comments (4)

Leave a Reply

Your email address will not be published. Required fields are marked *