CSS variables, is also a custom property, allow you to define reusable values that can be used throughout your CSS code. The var() function is used to access and apply the value of a CSS variable.

This provides a convenient way to centralize and update values, making your stylesheets more flexible and maintainable.

:root { --main-color: #ff0000; }
.element { color: var(--main-color); }

In this example, --main-color is defined as a CSS variable within the :root pseudo-class. The :root pseudo-class represents the root element of the document, and defining variables there makes them globally available.

The .element class uses the var() function to apply the value of the --main-color variable to the color property. So, in this case, the text color of elements with the class "element" will be set to #ff0000 (red).