CSS variables 1) are variable that can be used in a css property value.
They are also known as:
They are set using the custom property notation (e.g. with the – prefix in the property name)
For example, if you want to set dominant color of your color scheme:
:root {
--primary-color: black;
}
.note {
--primary-color: skyblue;
}
The css variable can be set on the property value by using the var() 2) function.
.note {
background-color: var(--primary-color);
padding: 2rem;
}
Example:
<div class="note">
A skyblue note
</div>
You can also use them with all css function to get more complex logical styling.
Example:
:root, * {
--space-xxxxs: calc(0.125 * var(--space-unit));
--space-xxxs: calc(0.25 * var(--space-unit));
--space-xxs: calc(0.375 * var(--space-unit));
--space-xs: calc(0.5 * var(--space-unit));
--space-sm: calc(0.75 * var(--space-unit));
--space-md: calc(1.25 * var(--space-unit));
--space-lg: calc(2 * var(--space-unit));
--space-xl: calc(3.25 * var(--space-unit));
--space-xxl: calc(5.25 * var(--space-unit));
--space-xxxl: calc(8.5 * var(--space-unit));
--space-xxxxl: calc(13.75 * var(--space-unit));
--component-padding: var(--space-md);
}