๐ฐvariables
a.k.a css custom properties
๐ธ Valid Names โ Cheatsheet โ Key Points
:root {
/* โญ๏ธ define css vars */
--panel-bg: #fff;
--panel-color: #000;
}
.panel {
/* โญ๏ธ use css vars */
color: var(--panel-color);
background-color: var(--panel-bg);
}
Valid Names
Cheatcheet
:root {
/* โญ๏ธ CSS variable */
--main-font: Helvetica, Arial, sans-serif;
}
p {
/* โญ๏ธ use var() to reference the variable */
font-family: var(--main-font);
}
key points
The custom properties behave as a sort of scoped variable because the values are inherited by descendant elements.
redefine css vars
Last updated
Was this helpful?