CSS variables enables developers to reuse the code, once the variable are defined and it can be reused effectively, which gives good control over stylesheet in terms of code readability, maintenance and bring consistency. The variables which are declared in :root pseudo-class act as global CSS variables.  We can declare the variable via :root pseudo-class and reusing the variable using var followed by variable name in parenthesis and assigning to CSS property. The class .foo and .bar will have the text color in red, the declared variable --color has been reused via var (--color) in both of these classes. :root {
--color: red;
}
.foo {
color: var(--color)
}
.bar {
color: var(--color)
}