The var() function in CSS is a powerful tool for defining and using custom properties, also known as CSS variables. It allows you to define a value once and use it in multiple places throughout your CSS, which can be incredibly useful for maintaining consistency and making global changes easier.
Here's how you typically use the var() function:
Example
:root {
--main-color: #ff0000; /* Define a variable */
}
You can click on above box to edit the code and run again.
Output
Using the variable:
Example
.element {
color: var(--main-color); /* Use the variable */
}
You can click on above box to edit the code and run again.
Output
Changing the value:
Example
:root {
--main-color: #00ff00; /* Change the value */
}
You can click on above box to edit the code and run again.
