What are CSS Custom Properties (Variables) and How Do Double-Dash Prefixes Work?

Understanding Custom CSS Properties Prefixed with Double Dash

In your provided code snippet, you encountered CSS properties prefixed with double dashes (--), such as --color-link and --font-thin. These properties belong to a set of CSS custom properties, which are user-defined properties that allow for greater flexibility and customization in CSS styling.

According to the W3C spec on custom properties, these double-dash-prefixed properties are defined using the following syntax:

--<property-name>: <value>;</value></property-name>

where --property-name is the name of the custom property, and is the desired value for that property.

Custom properties serve several purposes:

• Stylistic flexibility: They allow for easy modification of CSS properties across multiple elements, reducing the need for redundant declarations.
• Theme management: Custom properties can be used to define theme-specific variables, simplifying the process of switching between different themes.
• Variable substitution: They enable the use of variables as values for other CSS properties, providing increased flexibility in styling.

Using the var() function, you can access the values of custom properties within other CSS declarations. For instance, in the following code, the color property of the #foo h1 element is set to the value of the --main-color custom property:

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

Reference Information

• [W3C Custom Properties Spec](https://www.w3.org/TR/css-variables/)
• [MDN Web Docs: CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)
• [CSS Tricks: All About Custom Properties](https://css-tricks.com/custom-properties-all-the-things/)

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