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>])

Text

Things to know...

Text

  • 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.

CSS Custom Properties

By Praveen Puglia

CSS Custom Properties

  • 967