CSS - Variable (Custom Property)

About

CSS variables ¹⁾ are variable that can be used in a css property value.

They are also known as:

• custom properties
• cascading variables (in reference to the cascading processing of CSS

Example

Set

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:

• for you whole page (on the root)

:root {
  --primary-color: black;
}

• for particulars element with a selector. example for all element with the class note

.note {
  --primary-color: skyblue;
}

Usage

The css variable can be set on the property value by using the var() ²⁾ function.

.note {
   background-color: var(--primary-color);
   padding: 2rem;
}

Example:

• with the below html

<div class="note">
A skyblue note
</div>

• and the variable set to skyblue the output is:

Calculation

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);
}