5 Levels of Using CSS Variables

To declare and apply a variable within CSS is a common usage requirement. Especially for big projects, it’s totally tedious to write the same CSS value many times. Not to mention it’s hard to handle these values conveniently by JavaScript.
In the early days, the native CSS is not as powerful as expected, and we have to use one of the CSS preprocessors, such as SASS or LESS, to define variables in CSS.
Fortunately, since 2017, all major browsers support CSS variable syntax, it’s a feature that makes native CSS great again.
This article will introduce the usages of this feature from elementary to profound. After reading, your CSS skills will enter to the next level. 🆒
1. Declare a CSS Variable Like a Guru
To declare a CSS variable, we can use -- before a variable’s name:
body
As the above code shows, the --theme-color is a CSS variable.
The two lines in the front may be a bit strange. Actually, because “$” is used by SASS to define variables, and “@” is used by LESS. The CSS community choose the -- for native CSS code to avoid conflicts.
In the definition of a CSS variable, we are free to use any types of values:
body
The names of CSS variables, by the way, are case sensitive. The --theme-color and --theme-Color are two different variables.

2. Read a CSS Variable Properly
After the definition of a CSS variable, we can use it as we need. The syntax is very simple:

As shown above, we can use the var() function to read and apply a variable.
To make our code more stable, we can apply the second argument of the var() function. This argument represents a default value if the variable is undefined.

This is a good practice, especially for a big project which includes many programmers. Cause sometimes a programmer cannot be sure that a variable is always available or not.
And of course, the var() function can’t be used on the left:

3. Know the Scope of a CSS Variable
In a programming language, a variable has its scope. For a CSS variable, the rule is very simple and the same as other features: Cascade.
Let’s see it by a real interview question:
Now, there are three elements on our DOM:

So the question is:
Will the corresponding elements show the expected colors of their texts?
Think about this before continuing reading. Because you may meet similar questions in your next interview. 🙂

Photo by Magnet.me on Unsplash
The answer is “Yes”. As we all know, CSS stands for Cascading Style Sheets. The cascading rule is everywhere.
In this example, though we apply the --color variable to all elements by the *{color: var(--color);}, different elements will use different color variables based on the cascading rule of CSS:
Since we defined the color variable as “red” for the “content” class, the relative elements will be red.
Since we defined the color variable as “green” for all the “div” elements, the “div” elements which are not “content” class will be green.
Since the global color variable is blue, other elements which are not “div” will be blue.
Of course, this example is a specially designed question for technical interviews. In the real world, it’s better to not define variables’ names this way, cause it looks confusing and bug-prone.

4. Apply Different CSS Variables for Different Screen Sizes
Nowadays, mobile devices are everywhere. It’s essential for a website to have different styles for different screen sizes. With the help of the “@media” rule in CSS, this task becomes easy.

The above code is a simple example. Anytime when the screen’s width is smaller than 768px, the color of the “div” elements will become red.

5. Use JavaScript To Handle CSS Variables
In fact, the CSS variables build a bridge between CSS and JavaScript. Since we can use JavaScript to change CSS variables dynamically, it boosts the possibilities of the web design.
For instance, many websites can change its theme color, such as dark, light or even more colors, by a user’s choice.
One possible solution for this feature is to define a global CSS variable called --theme-color and apply it to relative elements, then use JavaScript to handle the changes of it and save the choice to the browser’s local storage

https://www.netaworld.org/blogs/movies-tvonline/2021/07/19/watch-mortal-kombat-2021-full-online-movie-free-hd
https://www.netaworld.org/blogs/movies-tvonline/2021/07/19/watch-the-unholy-2021-full-online-movie-free-hd
https://www.netaworld.org/blogs/movies-tvonline/2021/07/19/watch-jungle-cruise-2021-full-online-movie-free-hd
https://www.netaworld.org/blogs/movies-tvonline/2021/07/19/watch-old-2021-full-online-movie-free-hd
https://www.netaworld.org/blogs/movies-tvonline/2021/07/19/watch-the-tomorrow-war-2021-full-online-movie-free