In programming languages, it is common to use variables.
Variables can also be used in CSS.
var in CSS is a property to call the declared variable .
However, there are some points to be aware of when using variables in CSS.
In this article, we will explain how to call a variable using var and points to note when using variables, using description examples.
In the second half of the article, we explain how to declare variables and how to call variables with var using specific examples, so please read to the end.
Table of contents[
- CSS var is a property for calling variables
- A variable is a box that stores a value
- Explain how to handle variables using var() in CSS
- Declare a variable first
- call the variable
- Provide an alternative value in case the value of the variable is invalid
- Advantages of using variables in CSS
- variables can be reused
- All values are changed just by changing the value of the variable
- Notes on using variables in CSS
- Variable names are case sensitive
- value must match
- Some browsers do not support
- Make CSS variables compatible with IE using Polyfill
- Introducing a description example of calling a variable using var in CSS
- summary
CSS var is a property for calling variables
The role of var in CSS is to call variables.
var is an abbreviation for “variable” and means a variable.
As will be explained later, variables are declared by inserting a value into the variable name prefixed with “-“.
var calls the variable by using it with the value of the property you want to use .
Don’t get confused, CSS variables are called CSS custom properties.
A variable is a box that stores a value
If you don’t understand variables in the first place, you can’t handle var.
Variables are for inserting values into boxes and calling them wherever you want to use them .
Variables must be understood in programming.
For example, we will introduce an example of using variables in JavaScript, which is often used in web production.
HTML
<body>
<script>
var i = ;
alert(i);
</script>
</body>Above, we wrote the JavaScript inside the HTML file.
There are several ways to declare variables in JavaScript, but this time I’m using var for clarity.
We put a value in the variable i and call the variable when using the alert to display the popup.
The above code will display the following popup when the website is opened.
You can see that the character stored in the variable i is displayed.
A variable can thus store a value and retrieve it by calling the variable name.
Furthermore, variables can always be overwritten with their stored values.
Since the value of the variable i has been rewritten, the popup will be displayed as follows.
If the variable names are the same, the values described below apply.
Declaring the same variable name repeatedly in CSS is rare, and basically the value stored in the variable name is often rewritten.
Understanding and using variables means less code and easier maintenance.
Explain how to handle variables using var() in CSS
Now that you understand variables, I will explain how to handle variables in CSS.
There are three steps to handling variables in CSS:
- declare a variable
- Call a variable using var with the property’s value
- Specify an alternate value for when the variable becomes invalid
Once you have memorized the procedure, you will be able to handle it easily, so make sure you master each step.
Now let’s take a closer look at the three steps.
Declare a variable first
When declaring a variable in CSS, put “–” in front of the variable name in the selector . Then put the value in the variable name.
Here’s a simple code example.
CSS
:root{
--textcolor:red;
}:root has the same meaning as the html tag. There is no problem with writing html tags in the selector, but it is common to use :root when declaring variables due to the high level of detail .
By declaring a variable with :root, you can call it throughout your website.
In the code above, the variable name is “textcolor” and the value is red.
The variable name must be preceded by two hyphens.
You have now declared the variable.
Next, I’ll show you how to call variables.
call the variable
Now that the variables have been declared, the next step is to call them.
Use var() to call variables.
Let’s call the “textcolor” we just declared.
HTML
<p>変数を使用して文章を赤色にします。</p>CSS
:root{
--textcolor:red;
}
p{
color: var(--textcolor);
}You can call the value of red stored in the variable just by writing the variable inside the var brackets.
Once you declare a variable with :root, you can use it repeatedly with other properties.
CSS
:root{
--textcolor:red;
}
p{
color: var(--textcolor);
}
div{
width: 300px;
background-color: var(--textcolor);
}The same red can be called by calling the same variable not only for the text color but also for the background color.
The advantage of variables is that they can be used over and over again .
Now we can call the variable, but we have to take one more step.
Provide an alternative value in case the value of the variable is invalid
If the variable is not declared, has the wrong value, or has a misspelled variable name, the variable will not work properly and will become invalid.
Specify an alternative value for such cases.
Here’s a code example with alternate values.
CSS
:root{
--textcolor:red;
}
p{
color: var(--textcolor);
}
div{
width: 350px;
background-color: var(--textcolor);
}In the code above, the variable names are also fine as they describe the values exactly.
But if you forget to declare the variable it will not be decorated.
Therefore, write the alternative value after you write the variable name.
CSS
p{
color: var(--textcolor,blue);
}
div{
width: 350px;
background-color: var(--textcolor,green);
}In the CSS code above, the value written next to the variable name was applied because the variable was not declared. Here is an example with the alternate value applied.
When using variables, don’t forget to assume errors and write alternative values .
By following the above three steps, you will be able to handle variables in CSS.
Advantages of using variables in CSS
There are two main advantages of using variables in CSS.
- variables can be reused
- All values are changed just by changing the value of the variable
Extensibility and maintainability are very important for CSS .
Using variables in CSS has many benefits.
Let’s take a closer look at each benefit.
variables can be reused
Once you set a variable, you can use it many times within the same CSS file.
For example, when complex colors have to be used many times.
CSS
:root{
--maincolor:rgba(4, 112, 62, 0.808);
}
p{
color: var(--maincolor,green);
}
div{
width: 350px;
background-color: var(--maincolor,green);
}The above code assigns complex colors to variables.
Writing the same color code many times in a CSS file can lead to writing errors.
However, by assigning it to a variable once, it is convenient to reproduce the same color without causing a description error .
In particular, let’s assign colors and sizes that appear many times to variables first.
All values are changed just by changing the value of the variable
This is very convenient because simply changing the value of a variable will change all the values that specify the same variable.
For example, I have the following code using variables:
CSS
:root{
--textcolor:red;
}
p{
color: var(--textcolor);
}
div{
width: 300px;
background-color: var(--textcolor);
}You can change styles all at once by simply changing the values of the variables in the code above.
CSS
:root{
--textcolor:blue;
}
p{
color: var(--textcolor);
}
div{
width: 300px;
background-color: var(--textcolor);
}Being able to change the value of the property that called the same variable just by changing the value of the variable is a great advantage in maintaining CSS.
The work of changing the parts where the same value is used one by one causes mistakes and is inefficient in terms of maintenance.
Using variables is also very useful for maintainability and extensibility aspects of CSS.
Notes on using variables in CSS
There are some things to be aware of when using variables in CSS.
If you don’t use variables after understanding the points to note, you will be the source of troubles and errors.
There are three main things to keep in mind when using variables in CSS:
- Variable names are case sensitive
- The value stored in the variable must match the value of the property
- Some browsers do not support CSS variables
I will explain each point in detail.
Variable names are case sensitive
CSS variable names are case sensitive.
Therefore, when calling variable names using var, you must be careful not to confuse uppercase and lowercase letters.
This is because variable names are case sensitive .
Here is a code example of variable names using uppercase and lowercase letters.
CSS
:root{
--Textcolor:red;
--textcolor:blue;
}
.oomoji{
color: var(--Textcolor);
}
.komoji{
color: var(--textcolor);
}Even though the variable names are spelled the same, they are case sensitive.
So be careful not to misspell capitalization when calling variables using var.
In particular, it is easy to make spelling mistakes, such as using uppercase letters for declared variable names, but using only lowercase variable names when calling variables.
If a variable doesn’t do what you think it does, check your spelling.
value must match
The value stored in the variable must match the value of the property that called the variable.
I’ll give you an incorrect example.
HTML
<p class="iro">文字の色を変えたい</p>
<p class="size">文字のサイズを変えたい</p>CSS
:root{
--textcolor:red;
--textsize: 20px;
}
.iro{
color: var(--textsize);
}
.size{
font-size: var(--textcolor);
}In the code example above, we are calling a variable that stores px, which is supposed to change the color of the text.
In addition, we are calling variables that store colors that are supposed to vary the size of the characters.
In this way, the property that calls the variable and the value stored in the variable may not match , so let’s check the value and the property.
You can deal with it by setting the variable name so that it is easy to understand.
Some browsers do not support
The reason why CSS variables and var are not often used is that IE (Internet Explorer) does not support them as they are.
Basically, when creating a website, you have to write HTML and CSS so that it works properly on all browsers.
Here, I will introduce how to make CSS variables and var compatible with IE.
Make CSS variables compatible with IE using Polyfill
To use CSS variables and var in IE, use Polyfill.
A polyfill is a code that supports properties that are not supported by browsers.
The Polyfill for making CSS variables and var compatible with IE reads the following code in the head tag of the HTML file.
HTML
<script>window.MSInputMethodContext && document.documentMode && document.write('<script src="https://cdn.jsdelivr.net/gh/nuxodin/ie11CustomProperties@4.1.0/ie11CustomProperties.min.js"><\/script>');</script>The above code is a Polyfill as of January 2021, so check the latest Polyfill and use it.
After writing Polyfill, IE can handle it, so you can use variables and var in CSS.
Note that Polyfill will be invalid in the part where important is used .
Introducing a description example of calling a variable using var in CSS
Finally, I will introduce a simple description example using CSS variables and var.
HTML
<div>
<h2>変数を使う</h2>
<p>変数はとても便利です。上手に使えば、サイトのメンテナンスも楽になります。</p>
</div>CSS
:root{
--m-color:red;
--s-color:blue;
--bg-color: linear-gradient(90deg, var(--m-color) 0%, var(--s-color) 100%);
--h-size:20px;
--textsize:14px;
--textcolor:white;
}
div{
width: 300px;
background: var(--bg-color);
}
h2{
font-size: var(--h-size);
color: var(--textcolor);
}
p{
font-size: var(--textsize);
color: var(--textcolor);
}Here is an example that makes full use of variables.
Normally, we wouldn’t use variables to this extent, but they can be reused when creating background gradations .
First, let’s store simple things in variables and get used to using variables.
summary
This time, I mainly explained how to declare variables with CSS and call them with var.
If you can handle variables with CSS, you can reduce the amount of description, and you can save time and effort when performing maintenance later.
However, some browsers do not support it, so there is a current situation where it cannot be actively used.
If you do not have to support IE, it is a property that you want to use positively.
Remember to be careful when working with variables.
It’s especially easy to make spelling mistakes , so be sure to double-check.
