What are CSS Variables?

A variable is used in many programming languages, variables are the containers in computer programming to store values. Variables are the building blocks of all computer programs because they allow computers to store, use, and alter data.

Since CSS is a style sheet, it is different than the programming languages like C, C++, Java, Python, etc.

Thus, CSS variables are unique style variables that can be used anywhere in a CSS document.

When writing a CSS declaration, you usually start with the property, which is the style that the declaration is targeting, and then the value, which is the type of styling that will be applied. Then this declaration is linked to a CSS selector. For instance:

div { background-color: green; }

For a long time, this was the only possible method of assigning values to properties in plain CSS. Before the release of the CSS variables, if you wanted something similar to variables in CSS, you would need to use a CSS preprocessing language like Sass (which is incorporated into frameworks like Bootstrap).

However, CSS variables now provide an alternative to an add-on solution for the styling of our website elements. CSS variables, also known as custom properties, allow us to define our own custom values, making our code easier to read and change.

Declaring CSS Variables

Before using a CSS variable, we first have to declare one. We can assign any value to a CSS variable.

To declare a CSS variable, write it inside a rule set, similar to any other CSS declaration. However, the difference is that the property of a CSS variable always has two dashes as its prefix, followed by a name you assign it.

p {
--text-color: #ff7b58;
}

Note: Custom property names are case-sensitive. A CSS variable named --text-color will be interpreted differently from --Text-Color. Hence, it is better to avoid capital letters in your variable names to prevent such confusion.

var() function

We use var() function to apply our CSS variables to the HTML page. Functions are often used in programming, a function is used to perform a certain task/procedure.

Here in CSS, the var() function is used to find a particular CSS variable and apply it to a selector.

p {
--text-color: #ff7b58;
color: var(--text-color);
}

In the example, the var() function finds the value of the --text-color custom property that we made, then applies this value (#ff7b58) to the color of any text inside a

tag.

In case the CSS variable doesn’t work due to a typo, or the failure of the browser to render the value you specify for your variable. We can also write a fallback value inside var().

A fallback value is written inside var() after the CSS variable, separated by a comma ‘,’. { color: var(--text-color, red); }

Inheritance

Inheritance is the property of OOP where the child element inherits the properties and methods of its parent element.

Just like with normal CSS, child elements inherit the CSS variable values of their parent elements; unless the parent value is overwritten in the child element.

We can use inheritance and declare CSS variables for global scope, thus making it available for every element.

:root {
--background-color: #93e9be;
--text-color: #ff7b58;
}



div {
background-color: var(--background-color);
}

#section-1 {
color: var(--text-color);
}

Scope and CSS Root Variables

The scope of a variable specifies where it will work based on where it is declared. A CSS variable can have either local or global scope.

Local CSS variables only work within the selector in which they are defined. Whereas, Global CSS variables work across an entire document.

We create global CSS variables by writing their rules for the :root selector, which applies to the HTML document object model's topmost element, — which contains all the other elements.

Note: While CSS variables can be declared in any CSS selector, it's usual practice to declare all or most CSS variables in :root to ensure that they work across the document.

Conclusion

Once you've grasped the fundamentals of CSS, adding CSS variables to your programming vocabulary will save you a lot of time in the future. It's beneficial to format your CSS in a way that can be read and adjusted quickly and smoothly.