Home > Article > Web Front-end > What does var in css mean?
The var() function in CSS provides variable storage and usage functions. Values can be assigned to variables and used throughout the style sheet. Usage: 1. Use the -- prefix to declare the variable (--
: ); 2. Use the var() function to obtain the variable value (var(-- ) ). Use var() for reusability, consistency, and ease of maintenance, and to create values that adjust based on media queries or JavaScript variables.
#What is var in CSS?
The var()
function in CSS allows you to store and use variables. It lets you assign a value to a variable and then reuse that variable throughout your stylesheet.
How to use var
To use var()
, follow these steps:
--
prefix to declare a CSS variable. The syntax is: --<Variable name>: <Value>;
var()
function to get the value of the variable. The syntax is: var(--<Variable name>);
Example
For example, the following code declares a A variable named --primary-color
and set it to blue:
<code class="css">:root { --primary-color: blue; }</code>
You can then use this variable in other parts of the style sheet:
<code class="css">.heading { color: var(--primary-color); }</code>
Advantages
There are many advantages to using CSS variables, including:
var()
function to create dynamic values, such as resizing or coloring based on media queries or JavaScript variables. Note
var(--var-1)
. var()
The function does not support calculation expressions, such as var(--var-1 var(--var-2))
. The above is the detailed content of What does var in css mean?. For more information, please follow other related articles on the PHP Chinese website!