--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
Global
Local

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)
Get
Set

Pain

Variables not working in:
Media queries
0
 Advanced issue found
▲
 
 
SASS functions
0
 Advanced issue found
▲
 
 
When --color-primary is invalid or NOT available, the background will default to its initial value of transparent.
0
 Advanced issue found
▲
 

CSS variables in TC

Typography
Colors
Z-index