coding180 icon
Coding180
CSS Variables

CSS Variables

Home > Tutorials > CSS > CSS Must Know


Special mention goes to the values ​​expressed by recalling the variables.
It is very important, as you will experience, to learn, right away, to assign variables to your CSS document.
Let's explain better.

With modern CSS it is possible to declare variables - usually at the top of the CSS sheet, before anything else - and use them as property values ​​later.

To use a variable, you must declare it.

The syntax for declaring it is as follows:
 

:root {
--variablename: value;
}


So, for example
 

:root {
--variablename: purple;
}


Then, when you want to use it later, you will have to type your code - for example - like this:
 

h1 { 
   color: var(--nomevarabile); 
}

 

But why is it essential to use variables? 

Imagine using them to define the main colors of your website.
You like the site, and you are really satisfied with your palette! But the customer has suddenly changed his mind and asks you to change those colors.
Without the use of variables you should go and modify, in this unpleasant eventuality, the color of the elements one by one. A big job, don't you think?
If, on the other hand, you have used a variable as the value of your color-related properties, you just need to change the value of the variable in question to see the color change at every point where you used it: an incredible time saving! 

What do you say, is it worth learning how to use them? 


user

Robort Gabriel

Lagos, Nigeria

Freelance Web Developer, Native Android Developer, and Coding Tutor.

Skills
  • UI / UX
  • JavaScript
  • Python
  • PHP
  • Kotlin
  • Java
  • Bootrap
  • Android
  • Laravel