DEV Community

Calvin
Calvin

Posted on

Reading Snippets [32 => CSS]

Custom properties contain specific values to be reused in a document.

Custom property notation (e.g., --main-color:black;) is used to set custom properties.

Declaration of custom property on the :root pseudo-class allows for use where needed throughout a document.

The var() function is used to access custom properties.

Example:

Declaring a custom property:


element {
  --main-bg-color:brown;
}

Enter fullscreen mode Exit fullscreen mode

Using the custom property:


element {
  background-color:var(--main-bg-color);
}

Enter fullscreen mode Exit fullscreen mode

Source:Developer.Mozilla

Top comments (0)