CSS variables just like variables in any other programming language affords us the chance to store a value for later referencing in any part of our code. There is no limit to what kind of values we can store in the CSS variable , we can always pass in any regular values that can be assigned to any CSS properties such as colors, border-radius, margin, text-align and the likes.
To declare a CSS variable, the following syntax must be followed : A double dash which precedes the name of the variable, a colon, which is immediately followed by the value we want to pass ino the variable
--background-color : #eee
--btn-radius : 15px;
In the above illustration, the first variable is named background-color which takes in a color value, and the second is named btn-radius which takes in a length value in px, we can then be able to reference our values anywhere in our code later on with these variable names.
We must bear in mind that a CSS variables can either have a global or local scope. A variable declared in the root of the document using a root selector(:root) is a global variable and can always be assessed through the entire document while on the other hand, a variable declared only inside a block of a selector is only accessible within that selector block. Let's take a look at some illustrations.
A variable declared in a root selector(It can be accessed globally)
:root{
--btn-color : #008fd1;
--bkg-color : #eee
--btn-radius : 15px;
--btn-padding: 2rem 1.5rem
}
A variable declared in an element selector(It can only be referenced within this block)
main{
--padding: 3rem 2.4rem ;
}
How then do we reference our CSS variables whenever we need them?
To reference a declared CSS variable, we simply need to make use of the var ( ) function. This takes in two arguments. The first is the name of the variable at declartion time and the second, an optional value which is the fall back value in a situation where the variable is not found.
var (--variable-name, fall-back value )
Let's try to reference some of our earlier declared variable in our root selector as we know by now that it can be accessed globally. Say we have a multiple button elements on our page with a class of btn which we want to style
.btn {
color : var(--btn-color, #00008b); // #00008b is a fall-back value is passed in a situation where the variable can't be read
background-color: var(--bkg-color);
border-radius : var(--btn-radius);
padding : var(--btn-padding);
}
All we did here was pass the values stored in our variables to certain properties in order to style our button elements. Let's try to have a visual understanding of what this really looks like behind the scene.
.btn {
color : #008fd1; //
background-color: #eee ;
border-radius : 15px ;
padding : 2rem 1.5rem;
}
CSS just fetches these values from the variables in which they were stored but keep in mind, these abstraction is not shown to us.
We may then be wondering, why are all of these important? Why use CSS variables when we can just pass in our values to certain properties the usual way?
Well, one major advatage of CSS variables is that it allows us change certain values that affects multiple elements in just one location. Say we decide to change the color of all buttons, links on a page from blue to yellow, we'd normally need to go into each and every one of the block where the styles for these elements are declared and then change the values from blue to yellow manually but with CSS variables, we change this value at just one location and it affects all our intended elements which are referencing this variable.
CSS variables also makes our code easier to read and also makes it more understandable.
You can further read more about CSS variables in this MDN Documentation
Thanks for reading😉