Variables in CSS (or custom properties or CSS native variables) are becoming more widely adopted across the major browsers. CSS variables allow for enhanced control over your code as well as the ability to reduce clutter and avoid repetition in your code. What’s more, with CSS native variables you can use JavaScript to update application and values based on user data and/or interactions (which was not possible with preprocessor variables)! Indeed, some extremely exciting abilities and new features are now possible with the introduction of CSS native variables. In the following tutorial, I’ll show you how to get started using these variables by going over basic setup and simple usage. We’ll take a look at a few examples and discuss use case. I’ll even show you how powerful these new CSS variables can be in combination with CSS’s calc method. Let’s take a look!

Syntax

CSS variable syntax is relatively straightforward. To instantiate a CSS variable, simply use two dashes (–) followed by one or more valid characters. Valid characters are alphanumeric characters, dashes, and underscores (_). Variable names may start with dashes or underscores, but not with numbers. Variable names cannot contain spaces. Note that variable names are case sensitive, so --myvar points to a different value than does –myV ar .

For example:

Valid

--var --foo-bar --foo_bar ---var --_var --var123

Invalid

--1var --var!@#$%^&*() --foo bar

Basic Setup

Setup is pretty simple as well. Generally, CSS variables must be declared within a CSS selector and its associated curly braces (i.e., within a CSS rule). Common practice is to place all variable declarations within an html {} rule at the top of the stylesheet (the :root {} pseudo element is also commonly employed). CSS variables can also be declared directly within the CSS rule in which the variable is being used. Cascading rules apply to variables as well. You can read more on the cascade protocol employed in CSS (with specific attention payed to variables) by clicking here. Variables are invoked by calling the var method (e.g., var(--var) ) which returns the value of the specified variable. CSS variables may take on any valid CSS value and can even take on other variables as a value.

Here’s an example of the basic setup:

html { --myVar: red } div { background-color: var(--myVar); }

The above code declares a custom property (variable) within the scope of the html element (or root element) and assigns the variable a value of red. The var function is then used within a rule affecting all divs in the document, effectively giving all divs a background-color of red.

Here it is in action:

See the Pen yaPVba by Develop Intelligence (@DevelopIntelligenceBoulder) on CodePen.

In Conjunction with the Calc Function

The CSS clac function is pretty nifty. If you’re not familiar with it, go ahead and get up to speed by clicking here. Basically, calc allows you to execute mathematical operations on values in CSS. Let’s say you wanted to give an element a height that’s always 20px shorter than 50% of the browser window’s height. To achieve that, you could use the calc method to say height: calc(50vh - 20px); .

Here’s calc in action:

See the Pen ZpaBvy by Develop Intelligence (@DevelopIntelligenceBoulder) on CodePen.

Now let’s say you want to have two divs on your page… one that is always 20px shorter than the other one, BUT! let’s also say that you’ll be making changes to the height of the independent one sometime in future. You could go in and do some calculations in your head and rewrite several things every time you change the height of the one div, but now you have CSS variables so you won’t have to do that! That’s actually one of the major benefits of CSS variables, being able to make an update in one spot that will then affect various other items in your code. Here’s the example; make sure to try adjusting the variable’s value up in the html rule to see how it affects things!

See the Pen pEdNKR by Develop Intelligence (@DevelopIntelligenceBoulder) on CodePen.

Notice that no matter what you set the variable value to, the dependent div is always 20px shorter than the independent one.

And there you have it; a brief introduction to CSS variables. Use the double dash to declare a variable within a rule and then use the var function to access the variable’s value. If you’re feeling fancy, you can use variables in conjunction with the calc function to create dependent values. Overall, CSS variables should help you to reduce redundancy and clutter; they are great tools to help you customize and organize your code!