DEV Community

Cover image for CSS Variables Tutorial
Richard Rembert
Richard Rembert

Posted on • Updated on

CSS Variables Tutorial

Custom Properties (commonly known as CSS Variables) are a modern addition to CSS. If you’ve worked with programming languages such as JavaScript, Python, etc, you’ll know that variables are extremely useful.

A variable is a name which refers to a value, and by using variables in CSS we greatly reduce code repetition & create much more easily maintainable stylesheets.

Defining a CSS Variable

We define a variable by using a name beginning with a double hyphen (--variable-name), followed by a colon and a value (any valid CSS value):

:root {
  --main-color: green;
}
Enter fullscreen mode Exit fullscreen mode

The :root pseudo-class is a special selector, that applies the style globally to the HTML document. More on this later!

The variable can be accessed using var():

p {
  color: var(--main-color)
}
Enter fullscreen mode Exit fullscreen mode

Defining Variables in Elements

We can define CSS Variables inside of any element:

:root {
  --default-padding: 30px 30px 20px 20px;
}
body {
  --main-bg-color: black;
}
p {
  --main-color: lightblue;
}
a:hover {
  --main-color: red;
}
Enter fullscreen mode Exit fullscreen mode

Variable Scope

Each variable is available only to child elements of the selector they are defined in — this is the ‘scope’.

Let’s see this in the context of our previous example using :root:

:root {
  --main-color: green;
}
Enter fullscreen mode Exit fullscreen mode

:root is a special pseudo-class that refers to the the root element of a tree.

In an HTML document, the :root selector refers to the html element. And in fact, it has a higher specificity than html so it will always take priority.

So when a variable is applied to :root it’s considered to have ‘global scope’ & is available to all elements.

If we added a variable to a main element, it’d only be available to children of main:

main {
  --main-color: lightblue;
}
Enter fullscreen mode Exit fullscreen mode

If we attempt to use it using it outside of this element, it won’t work.

So with our two variables as follows:

:root {
  --main-color: green;
}
main {
  --main-color: lightblue;
}
Enter fullscreen mode Exit fullscreen mode

Our --main-color will be green anywhere in our document, except for main and any of its child elements — they will be lightblue.

Bonus tips..

Case sensitivity

CSS variables are case sensitive!

:root {
 --color: green;
 --COLOR: lightblue;
}
Enter fullscreen mode Exit fullscreen mode

So --color and -COLOR are two separate variables.

Using variables in HTML

Variables can be used directly in HTML, like so:

<!--HTML-->
<html style="--size: 800px">
body {
  max-width: var(--size)
}
Enter fullscreen mode Exit fullscreen mode

Using variables within variables

A variable can be used within another variable:

--base-red-color: #f00;
--background-gradient: linear-gradient(to top, var(--base-red-color), #222);
Enter fullscreen mode Exit fullscreen mode

Using variables with math

CSS variables can be used with the calc() function:

--input-width: 500px;
max-width: calc(var(--input-width) / 2);
Enter fullscreen mode Exit fullscreen mode

Using variables with media queries

We can make CSS variables conditional with media queries!

The following code changes the value of the padding, based on the screen size:

:root {
    --padding: 25px 
}
@media screen and (max-width: 750px) {
    --padding: 10px
}
Enter fullscreen mode Exit fullscreen mode

Setting a fallback value for var()

When you use the var() function you can define a second parameter. This value will be used if the custom property is not found:

width: var(--custom-width, 33%);
Enter fullscreen mode Exit fullscreen mode

Summary

I’m sure you can tell that the use of CSS variables will make your code much more readable and maintainable.

They also significantly improve the ease of change across larger codebases. If you set all your constants in a separate CSS file, you won’t find yourself jumping through thousands of lines of code, whenever you want to make a simple change!

Conclusion

If you liked this blog post, follow me on Twitter where I post daily about Tech related things!
Buy Me A Coffee If you enjoyed this article & would like to leave a tip — click here

🌎 Let's Connect

Top comments (0)