#1 Proměnná
Proměnná, podobně jako v programovacích jazycích, je deklarace, která obsahuje hodnotu. V CSS lze deklarovat proměnnou pomocí dvou spojovníků (nesprávně pomlček) takto: --nazev.
Do CSS proměnné lze vložit jakoukoliv hodnotu – od číselné hodnoty s aboslutní i dynamickou jednotkou, barvu uloženou ve formátu HEX, RGB i klíčové slovo. Nejčastěji se proměnné používají právě pro barvy, kdy není potřeba kopírovat hodnotu barvy, stačí pouze vložit proměnnou.
#2 Ukládání proměnných
Proměnné se nejčastěji ukládají do selektoru :root, který vybere hlavní adresář a lze tak jeho vlastnosti aplikovat na všechny prvky. Kód tedy může vypadat takto:
:root {
--white: #FAFAFA;
--cyan: #10919A;
--cyan-rgb: 16, 145, 154;
--green: #45F75A;
}
#3 Používání proměnných
Po nadefinování proměnných je lze použít v stylování prvků pomocí funkce var(), která vloží hodnotu proměnné. Použijeme-li výše nadefinované proměnné, můžeme například obarvit barvu textu v odstavcích na zelenou a dát každému prvku s třídou .box poloprůhledné tyrkysové pozadí.
p {
color: var(--green);
}
.box {
background-color: rgba(var(--cyan-rgb), .5);
}