var() function can be used to insert the value of a custom property.
Variables in CSS should be declared within a CSS selector that defines its scope. For a global scope you can use either the :root or the body selector.
The variable name must begin with two dashes (--) and is case sensitive!
The syntax of the
var() function is as follows: