CSS Variable
CSS variables can be used in every className to every css-property. using --var-- or -- identifier after the property. The main diffrent
between them are with --var-- you can use varaible name that startswith numeric character e.g --1x:4px but not
with '--'.
| classname | shorthand | css | Remarks |
|---|---|---|---|
color--var--name | c--var--name | color: var(--name) | |
color--name | c--name | color: var(--name) | |
width--var--side-bar-width | w--var--side-bar-width | width: var(--side-bar-width) | |
width--side-bar-width | w--side-bar-width | width: var(--side-bar-width) | |
width--var--24x | w--var--24x | width: var(--24x) | |
width--24x | w--24x | Not Valid, variable name with number not supported with '--' use '--var--' instead |
Example
<div class="width--blockquote-width" style="--grey-default:rgba(210, 213, 217, 1);--grey-alt:rgba(186, 189, 194, 1)">
<h3 class="color--grey-default --hover-color--grey-alt">Hello World</h3>
</div>Declaring css variable using aliascss className.
To define css variables using classN names use this format, --var-name:value, value passed is just a plain string and
it is not compiler to any value format as there is no way for aliascss to know the type of value you want to use. However ,length based are goog to go in this case.
Example
<div class="width--blockquote-width color--grey-alt --grey:--grey-default" style="--grey-default:rgba(210, 213, 217, 1);--grey-alt:rgba(186, 189, 194, 1)">
<h3 class="color--grey --hover-color--grey-hover --grey-hover:black">Hello World</h3>
</div>