Variables

Variables in CSS should be declared within a CSS selector that defines its scope, so for a global scope you can use either the :root or the body selector. The variable name begin with two dashes -- and is case sensitive!

For assign variable value to property var() function used.

.foo {
  --widthA: 100px;
  --widthB: calc(var(--widthA) / 2);
  --widthC: calc(var(--widthB) / 2);
  width: var(--widthC);
}