REASON OF USING CSS VARIABLES: Regular Joe Series
Welcome to episode two of Joe CSS variable. If you have not yet gone through the previous episode please kindly do.
Why will Joe make use of css variable?
1. No — repetition of code: You don’t have to repeat code to style your website.
Before if you want to give <h> tag 1 color: #003dff; and you also want to make use of the same color, as the background color of the footer of your website you will need to retype the name of the color or hex number of the color.
Problem with this method is that you will need to retype any changes you are to make to your website any where you applied it.
With CSS variable you don’t need to retype. All you have to do is to reference the variable.
Changing the color will be easy because all you have to do is to change the color in where you declared it.
2. You may be saying that LESS and SASS has similar functionality what is the need for the CSS variable
ADVANTAGES OVER LESS AND SASS
The advantages CSS variable have over LESS and SASS are numerous.
-Have access to the DOM:
JOE WHAT IS DOM?
The DOM stands for Document Object Module. This is what is responsible for changes in your website.
The CSS variable can access your DOM
-Local Scopes
I have explained what local scope means in the previous post.
With the Local scope you can declare a variable locally and make use of it in that area.
-Change with Javascript: Javascript has the power to make changes to your CSS styling. So any code you write to make changes to your website can be affected with Javascript despite you used the CSS variable. For example you want the user to change the font size.
-It’s great for responsiveness: Many people want a different color for some of their code or want a change in their website in different view. CSS variable gives you the power to do that. You can declare the variable in different media query.
All these I have mentioned cannot be done with SASS or LESS
If you have question please kindly comment bellow.
Clapping will not hurt and sharing it doesn’t kill, please clap and share.
