CSS Variables are entities defined by CSS authors which contain specific values to be reused throughout a document. They are set using custom property notation (e.g. --main-color: black;) and are accessed using the var() function (e.g. color: var(--main-color);) .
Property names that are prefixed with --, like --example-name, represent custom properties that contain a value than can be reused throughout the document using the (var()) function.
The var() function can be used instead of any part of a value in any property on an element. The var() function can not be used as property names, selectors or anything else besides property values. (Doing so usually produces invalid syntax or else a value whose meaning has no connection to the variable.)