What is a css variable (also known as custom property or cascading variable)


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:

  • 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;


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

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


  • with the below html
<div class="note">
A skyblue note
  • and the variable set to skyblue the output is:


You can also use them with all css function to get more complex logical styling.


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

Discover More
CSS - Function

A css function is a function that can be used in a CSS property value to calculate complex styling requirement. Css function are mostly used with CSS Variable. Below we define the space unit variable...
CSS - Preprocessor

A preprocessor takes an arbitrary source file and converts it into something that the browser understands. Preprocessors implements features that browser doesn't support natively such as: variables...
Card Puncher Data Processing
Datacadamia - Data all the things

Computer science from a data perspective

Share this page:
Follow us:
Task Runner