CSS Custom Properties

declare a custom property

when declare a custom property, start it with --, the value of a property can be any valid CSS value: a color, a string, a layout value, even an expression

.box {
    --box-color: #002233;
    --box-padding: 0 10px;

    --transition-duration: .35s;
    --margin-top: calc(2vh + 20px);

    --suffix: ' >>';

custom properties cascade in the same way as normal CSS properties, use var() to get the value to a custom property:

.box .content-wrap {
    --box-color: gray;

    background-color: var(--box-color);
    margin: var(--box-margin, 10px);        // provide a default value if the custom property is not defined