Hi boys & girls, Welcome to my first blog. Before moving forward let's give you my short introduction. My name is Manas and I am a Computer Science student. This is my final semester in college & after this, I will be a CS Engineer. This is enough about me, will let you know in between a little more about me.
So, let's move further and come to today's topic i.e. " CSS Variables " . Before studying any topic, you should ask yourself these three questions i.e.
What it is...?
Why you should learn it...?
How to use it...?
What are CSS Variables? ❓
➡ So like a variable in every programming language is used to store some data, the same thing happens with variables in our CSS. CSS variables (also known as Custom Properties) are a modern feature in CSS that reduces the coding and maintenance time of your CSS code, also it helps in declaring values for reuse across a CSS file, which was previously possible only with preprocessors such as Sass and LESS. If you are not aware of Sass and LESS, let's keep them for some other day.
Why you should learn it? 🤷♂️
I will like to mention a few reasons to learn CSS Variables:
- It lets you write less code.
- Less repetition of code.
- CSS variables are available to DOM & can be accessed using javascript.
How to use CSS variables in your CSS file? ✌
So we will break down this process into 3 simple steps:
- Declaration of a CSS variable
- Using a CSS variable value
- Fallback values in a CSS variable
✔ Declaraing a CSS Variable
To name a CSS variable, we need to add a prefix '--' followed by the variable name. Example: --text-white
The ':root' mentioned here represents the html element, like traditional variables the CSS variables also have scope. The ':root' scope is the global scope.
:root{
--bg-color:red; /* this variable can be used anywhere in css file */
}
.container{
--secondary-color:blue; /* this variable can be used only inside the element with 'container' class */
}
✔ Using a CSS variable value
- To use a CSS variable as a value in any CSS property, we use
var(variable_name)method. Let's give you a demo...
:root{
--bg-color:red; /* declared a css variable with global scope */
}
.container{
background:var(--bg-color); /* using a css variable, value 'red' will be replaced in place of 'var('bg-color')' */
}
- CSS variables supports inheritance, elements inside another element can access its parent element variables.
<div class='container'>
<p class='para'>I am inside container </p>
</div>
.container{
--bg-color:pink;
}
.para{
background: var(--bg-color); /* we are accessing variable which was declared inside element with class 'container' */
}
✔ Fallback values in CSS variables
Suppose by mistake you gave a wrong variable name for any value of a CSS property or value for that variable doesn't fit for that property, in that case, your browser will not be able to find any value to provide to your CSS property thatswhy it becomes important to have fallback values.
Syntax to provide a fallback value to a CSS variable is as follows:
color:var(variable_name,fallback_value);
:root{
--primary-color:blue;
}
.container{
color:var(--primar-color,pink); /* we have mispelled the variable name, therefore 'pink' value will be applied to the 'color property' */
}
Final Takeaways 🥳
CSS variables are not necessary to use, but implementing them in our code will make our code much more easy and reusable.
To declare a variable, choose a variable name prefixed with 'double dot' i.e. '--'.
To use a variable in your CSS file, you have to take help of var() method.
CSS variables are like traditional variables...they also have a scope, obeys inheritance but in addition you can give fallback values to a CSS variable.
.