What Are CSS Variables? – Cloud Develop

CSS Variables are a means of using a particular value to change the property of various elements in your stylesheet. Variables in CSS work the same way they do in programming languages– they hold values that you can insert in various points of the same file by calling the variable. While learning to use variables in CSS isn’t compulsory, it is a great skill set to improve code efficiency.

How Do CSS Variables Work?

CSS variables are also known as custom properties because they are a means for you to create custom properties that you can reuse. CSS variables work is similar to variables in regular programming languages like JavaScript.

First, you give the variable a name, then assign a value to the variable. Wherever you refer to the variable name in the stylesheet, the value you saved in the variable gets applied to that element.

Using CSS Variables

To use CSS variables, we first have to declare the variable; then, we can call the variable wherever we want to in the stylesheet.

Declaring CSS Variables

First, you have to declare CSS variables within selectors; you cannot declare them openly as you would in typical programming languages. Declaring CSS variables within a selector limits them to the scope of that selector, meaning that you can only use the variable on elements within the element it was declared. If you want every element in your stylesheet to access your variable, you can declare it within the :root pseudo-class.

As an example, if you had a simple header element with h1 and paragraph elements like this:

<header>
	<h1>Cloud Develop</h1>
	<p>Article written by Stephen Nabena</p>
</header>

You can create and use CSS variables that you can use all through the document by putting a double-dash (–) in front of any name of your choice and giving the variable any value you want. Here’s an example:

:root {
	--font-color: #4f3c0b;
}

Using The Variables

Once you have declared the variables, you can use them anywhere within the scope of their declaration. In the example above, you declared the --font-color variable on the root so you can use it anywhere in the stylesheet. To use the variable, you need to make it the value of whatever properties you want to apply it.

For example, you can make the font colors of every element in the header to be what you specified in the --font-color variable by doing the following:

header {
	color: var(--font-color);
}

Conventions Of CSS Variables

You do not need to put CSS variables in a particular order; before declaring it, you can use a variable. However, it is usually a great idea to declare the variables at the top of the document to make things more straightforward and know where to change variable values if you need to.
Custom property names are case sensitive; that means that --my-property is not the same variable as --My-property.
Use a descriptive name when for your variables so that it’s easy to understand what each one does.

CSS Variables And JavaScript

CSS variables integrates very well with JavaScript and are a handy tool if you dynamically change the appearance of your webpage, such as changing the color scheme. The steps to change the background color of a webpage by clicking a button are as follows:

<!DOCTYPE html>
<html>
<style>
	:root {
    	--background-color: #ff7;
    }
    
    body {
    	background: var(--background-color);
    }
    
 .buttons span {
      border: 3px solid white;
      cursor: pointer;
      display: inline-block;
      height: 30px;
      margin: 10px;
      width: 30px;
    }
</style>
<body>
	<div class="buttons">
		<span style="background: #c16535"></span>
		<span style="background: #a13535"></span>
		<span style="background: #7a35c1"></span>
	</div>
<script>
	var buttons = document.querySelectorAll(".buttons span");
    var root = document.querySelector(":root");
    
    buttons.forEach((button) => {
    	button.addEventListener("click", (e) => {
        	root.style.setProperty("--background-color", e.target.style.background);
        })
    })
</script>
</body>
</html>

The code above lets you create three-span “buttons” with an inline styling of background. On JavaScript, you would add an event listener that sets the —background-color variable to whatever the value of background is on the particular button. The result of the code would be as seen below:

Advantages Of Using CSS Variables

1. Reduces Repetition In Your Stylesheet

Most projects you work on require you to use specific properties to have a consistent look and feel to your website. That doesn’t seem like a big deal when working on a small project, but you might find this quite annoying as your stylesheet gets more extensive. When you use CSS variables, you don’t have to repeat certain lines of code throughout your stylesheet, you only need to put in the names of the variables, and you’re good to go.

2. No Need To Remember Values

Remembering what values to use for specific elements can get confusing as your projects get more extensive. Hex codes, margin and padding values, font sizes, and styles are some of the many things you have to customize in your projects, and it’s easy to lose track of them when it gets too much.

If you use CSS variables, you do not need to remember these values; you can get your desired result by putting the variables where needed. Also, you can make your variable names descriptive to make it easy to remember where each one should go.

3. Make Consistent Changes To Your File

Sometimes you might need to make massive changes to the look of your website. When making these wholesale changes, it is easy to miss changing a particular element’s property to suit the new design theme. If you use CSS variables, you do not need to worry about that since any changes made to the variable would automatically reflect in all the places you used it.

4. CSS Variables Do Not Need To Be Compiled

Syntactically Awesome Stylesheets (Sass) and Leaner CSS (LESS) are both stylesheet extensions that make CSS more effortless and efficient. However, both .sass and .less file types cannot be read by browsers, meaning that they need to be compiled into CSS stylesheets before you can use them; CSS variables, on the other hand, do not require that hassle.

The fact that you can use CSS variables directly means that you can try things directly with the variables in the browser’s Developer Tools. The ability to change things in Developer Tools lets you have a live preview of the changes you are making and is something lots of developers do.

Read More: How To Underline in HTML