We know variables to be containers or placeholders for values which can be used throughout a program. And if need be to change the value, you would only have to change the value of the variable rather than changing the values in all appearances of the variable.
CSS also has a variable feature which can be used to declare values that can be used for properties throughout the stylesheet.
Benefits of CSS Variables
Here are two reasons why you should care about this feature:
- It's very easy to change values that are the same all through the stylesheet.
- It allows the creation themes to be easy, where two to three colors can be maintained all through the stylesheet without any variations or guesses.
Syntax
element1 {
--pinkColor: #FFC0CB;
}
.elementUnderElement1 {
color: var(--pinkColor);
border: 1px solid var(--pinkColor);
}
As observed above, a CSS variable can be referred to as a custom property defined by you. The preceding double hyphens (--) for pinkColor indicate that the property is custom. This is also what makes a variable.
In the elementUnderElement1 class, the variable can be used by calling the var() function and passing the custom property as an argument.
Few things to know about CSS variables
- They are case-sensitive.
- They can hold any value. When called with the
var()function, their values are used Remember that variables are just like placeholders. - If the value called for a property does not align with the syntax (e.g color: 20px;), the inherited or initial color is used. This is the normal behavior of CSS.
- Variables are custom properties, and properties can be declared anywhere, so you can declare variables in any element.
- You can declare as many variables as you want, wherever you want.
Scope of variables
In programming languages, you must have heard the term scope which defines the environment of a variable (i.e, which area of the program has access to that variable). The same goes for CSS. Defining the variable for element1 scopes the variable such that only element1 element and its children (such as elementUnderElement1 class) have access to the variable.
What if you want to declare a global variable?
:root 🔥
According to MDN,
The
:rootCSS pseudo-class matches the root element of a tree representing the document. In HTML,:rootrepresents the<html>element and is identical to the selectorhtml, except that its specificity is higher.
Any variables declared here can be used all through the stylesheet by any element. Example:
:root {
--largeFontSize: 50px;
--smallFontSize: 20px;
--color1: #fcfcfc;
}
h1 {
font-size: var(--largeFontSize);
}
@media only screen and (max-width: 400px){
h1 {
font-size: var(--smallFontSize);
}
}
Wrap Up
CSS allows uniformity of colors, sizes and other property values in a webpage to be made easily.
It also allows changing of values to be easy. Imagine using a color value for 20 properties in a page. Variables can be declared at a top element, and the var function called in the 20 places. If there's any need to change the value, you don't have to go over the 20 appearances, you're only concerned with the-top level element which the variable was declared.
However, you should put more consideration in naming variables. Instead of using pinkColor as a custom property, you can use mainColor. This is important if for any reason, you may change the value of the color variable to a color entirely different from pink.
I hope this article has given you a great kickstart to using CSS variables.
--greetings: "Thank you"
var(--greetings) for reading 😁
Top comments (0)