CSS Variable

CSS variables can be used in every AliasCSS className --var-- or -- identifier after the property. The main different
between them are with --var-- you can use variable name that startswith numeric character e.g --1x:4px but not with ’—’.

Example

<div class="--header-color:skyBlue">
    <h3 class="color--header-color --hover--header-color:blue">Hello World</h3>
</div>

Please note that , if we give variable names that end with valid css property then the value will be processed as by the AliasCSS property compiler .
For example "--header-bg:e3e3e3", will have value `#e3e3e3`, because the variable name is end with `bg` which is valid alias for css property and aliasCSS
will smartly first treat as a value for `background` as `bg` is alias for background property. Similarly, in example `--text-color:red/7` the value will be
applied as `oklch(from red l c h/0.7 )` cause its variable name end with valid css-property i.e color.
like wise any variable name end with 'text' will get value converted in quoted string.

Some Examples

--country-text:united_kingdom => --country-text:"united kingdom" // css value type hinting --country-content:united_kingdom => --country-content:"united kingdom"// css value type hinting --country-name:united_kingdom => --country-content:united_kingdom // No value type hinting --panel-color:rgb-225-225-0 => --panel-color:rgb(225 225 0) // css value type hinting --panel-col:rgb-225-225-0 => --panel-col:rgb-225-225-0 // No value type hinting --color-panel:rgb-225-225-0 => --color-panel:rgb-225-225-0 // No value type hinting --transform-rotate-half:rotate--180deg=> --transform-rotate-half:rotate--180deg// No value type hinting --rotate-half-transform:rotate-180deg=> --rotate-half-transform:rotate(-180deg) // css value type hinting --rotate-half-tf:rotate-90deg=> --rotate-half-tf:rotate(90deg) // css value type hinting

Rule: if has css-variable name ends with valid css-property or property alias, try to treat value accordingly to property, else leave it as it is.

Defining optional Default value for css variable

We can give default value for css variable adding :value when using css variables. The default value will be used if the variable is not defined in the style attribute or in the className.

<h1 class="color--header-color:skyBlue bg--display-bg">Hello World</h1>
 

Few Examples of using css variables