Custom Property

In CSS, a way of inventing a property that is meant to be referenced or reused in assignments to existing CSS properties for presentation purposes. Also known as CSS variables.

button {
    --btn-bg: #00ffdd;
    background-color: var(--btn-bg);
}

In the above example, the custom property --btn-bg is assigned a value of #00ffdd. In the following line, the custom property is used for the background-color property by accessing the value through the var() CSS function. This assigns the #00ffdd color to the background-color of any <button/> element found with this CSS.

Another way to declare custom properties in CSS is by using the @property syntax.

@property --btn-bg {
    syntax: "<color>";
    inherits: false;
    initial-value: #00ffdd;
}

The result of this is nearly the same as the earlier example. However, this syntax provides more control to the property, allowing configuration for the type of value expected, the inheritance behavior, and the default value if another appropriate value is not provided.