What are Double-Dash CSS Properties and How Do They Work?

Exploring the Enigmatic Double-Dash CSS Properties

You may have encountered a peculiar CSS code featuring property names prefixed with double dashes. These are not regular CSS properties but custom properties introduced in CSS3.

Understanding Custom Properties

Custom properties, also known as CSS variables, allow you to define and reuse values throughout your stylesheet. They enable flexibility and maintainability by centralizing design elements.

Syntax and Use

Custom properties are declared within the root element (:root) using the following syntax:

:root {
  --property-name: property-value;
}

You can then access the custom property value within any element using the var() function:

#element {
  color: var(--property-name);
}

Example from W3C:

:root {
  --main-color: #05c;
  --accent-color: #056;
}

#foo h1 {
  color: var(--main-color);
}

This example defines custom properties for the main and accent colors and uses the color value variable within the #foo h1 selector.

Reference and Documentation

For comprehensive documentation on custom properties, refer to the W3C Spec page:

https://www.w3.org/TR/css-variables/

The above is the detailed content of What are Double-Dash CSS Properties and How Do They Work?. For more information, please follow other related articles on the PHP Chinese website!