Up until this post we've constantly used the conventional way of defining CSS properties.
In this post we're going to explain what are CSS variables and why are they helpful and time saving and efficient.
What are CSS variables?
CSS variables are variables that declare that are intended to be used repeatedly throughout the CSS document.
How do we declare CSS variables
At the top of you CSS file
:root {
--variable: value;
}
What is :root ?
:root, is a pseudo-class that represents the <html> element which is the top level element of the document object model. :root has a higher specificity than <html>
Dissecting the custom property
A custom property are defined using -- two hyphens prefixing the property, following that property a colon : then the value that we'd like to assign it.
Let's look at an example.
:root {
--color: #000;
}
We've created a variable called color and assigned the color black to it. Now this won't be visible on the page unless the custom variable _ is assigned to a property_ like background-color.
This might seem complicated but we're going to see everything visually to understand better.
How to assign a custom variable to a property?
We cannot directly assign the custom variable to a property.
What do we mean by that? Let's take the above variable --color to a property.
For example, let's say we have a <div> and we want to give it a background of black using the above variable.
div {
background-color: --color;
}
Doing so won't apply the color to the background of the <div> because it is an invalid syntax. To make the property work, we use the function var().
The function var()
var(), is used to plug in the value of the custom variable to the property in order for it to work.
div {
background-color: var(--color);
}
This function takes multiple arguments, the first arguments being the custom variable we want assigned to a specific property followed by multiple fallback values.
what is a fallback value?
A fallback value is another value that substitutes the first argument which is the custom property if it isn't available.
Let's look at that
:root {
--color: #000;
}
div {
background-color: var(--color, red);
}
if the first argument --color is not available the color red will be applied. Let's take a look at another example:
:root {
--font: 'Inter';
}
div {
font-family: var(--font, 'Arial');
}
Let's say the font family Inter is not available on some other browser, the fallback value arial will be the one taking effect.
Why do we use CSS variables?
In case we'd like to suddenly change the background-color in our style sheet, instead of going through the entire document we can just change the value of the custom variable we assigned to the background-color property. It is time saving.
Top comments (0)