--variables

CSS

Using CSS Variables

For CSS variable we use:

• Prefix --

• The var(variable, default) function

For math calculations:

• The calc() function

Scoping and inheritance

• CSS variables have a GLOBAL and LOCAL scope.

• The :root selector allows you to target the highest-level element in the DOM, or document tree.

• CSS variables are resolved with the normal inheritance and cascade rules

Responsive

You can change the variables based upon the width of the screen (for example col width in table)

Access with JS

You can change the variables based upon the width of the screen (for example col width in table)

Pain

CSS variables in TC

Typography

Colors

Z-index