CSS Custom Properties

Browser Support

In Code...

/*Definition*/
:root {
    --name-of-variable: value;
}

/*Usage*/
selector {
    property: var(--name-of-variable);
}

General Syntax & Spec

var(<custom-property-name>[, <declaration-value>])

Things to know...

• Custom Properties can be used only as values to properties
• It's dynamic in nature. A native CSS variables lives in the live document.
• Custom Property names are case sensitive. So --foo is different than --Foo. 
• A single space is a valid value for a custom property. 
• Avoids side effects during serialization.