CSS proměnné

Jejich oficiální název je „uživatelské vlastnosti“ (custom properties), ale všeobecně se jim říká CSS proměnné. Protože se tak do značné míry chovají. Můžete si do nich uložit hodnotu, případně ji později změnit a používat. Hodí se především pro opakovaně používané hodnoty, jako jsou například barvy nebo rozměry.

Vytvoření proměnné

CSS proměnné mají speciální jména, která povinně začínají dvojicí pomlček. Následuje identifikátor podle stejných pravidel jako názvy existujících vlastností v CSS. Rozlišují se v nich malá/velká písmena, ale nedoporučuji vytvářet několik proměnných, jejichž jména se liší jen velikostí písmen.

Proměnnou vytvoříte jednoduše tak, že jejímu jménu přiřadíte hodnotu. Vypadá to úplně stejně jako jakákoli jiná deklarace, speciální je jen jméno vlastnosti:

:root {
    --barva-pozadi: #fcefe0;
    --barva-textu: #451111;
}

Použití proměnné

Chcete-li v některé hodnotě vyžít proměnnou, slouží k tomu funkce var(název_proměnné):

:root {
    color: var(--barva-textu);
    background-color: var(--barva-pozadi);
}

Za jménem proměnné můžete uvnitř var() uvést čárku a záložní hodnotu, která se použije, pokud dotyčná proměnná není definována. Pro barvu textu se nabízí černá a pro barvu pozadí bílá:

:root {
    color: var(--barva-textu, #000);
    background-color: var(--barva-pozadi, #fff);
}

Zatím proměnné vypadají jako drbání se pravou rukou za levým uchem. Proč bychom se o ně vlastně měli zajímat? Jedno z častých využití jsou opakující se hodnoty. Firma či web mívají svou firemní barvu, kterou v komunikaci konzistentně používají. Nejspíš se bude vyskytovat v textech, rámečcích nebo v pozadí barevně výrazných prvků. Nabízí se uložit ji do proměnné a důsledně používat. Získáte jistotu, že barva bude všude konzistentní a pokud bude třeba ji změnit či upravit, stačí změnit její definici.

:root {
    --nase-barva: #3a008c;
    --nase-barva-kontrast: #fff;
}

a {
    color: var (--nase-barva);
}

a:hover,
.invertovat {
    background-color: var(--nase-barva);
    color: var (--nase-barva-kontrast);
}

.invertovat a:hover {
    background-color: var (--nase-barva-kontrast);
    color: var(--nase-barva);
}

Změna hodnoty

Konec předchozího příkladu naznačuje druhou situaci, kdy se CSS proměnné hodí: když je třeba měnit vzhled podle kontextu. Definoval jsem třídu invertovat, která vytváří tmavé pozadí a bílý text. Stejnou podobu mají i odkazy po najetí myší (:hover). Uvnitř invertované oblasti ale potřebuji tuto podobu změnit, proto přidávám další pravidlo, že a:hover jako potomek prvku s třídou invertovat má vypadat jinak.

To je trochu otravné a pokud bude CSS obsahovat víc různobarevných bloků, které se potenciálně mohou do sebe vnořovat, vznikne v pravidlech nehezká bramboračka. CSS proměnné umožňují řešit takové situace docela elegantně. Hodnotu jim můžete přidělit v libovolném pravidle. Jestliže proměnná dosud neexistovala, vznikne. Pokud již existovala, změní se její hodnota. Hodnota proměnné v daném místě se pak určuje podle kaskády, stejně jako hodnota jakékoli jiné vlastnosti.

Můžete proto hodnoty vybraných vlastností definovat pomocí proměnných a následně v příslušných prvcích měnit tyto proměnné. Budou pak mít takovou hodnotu, jakou jim přiřadil nejbližší předek zkoumaného prvku:

:root {
    --nase-barva: #3a008c;
    --nase-barva-kontrast: #fff;
    --hover-pozadi: var(--nase-barva);
    --hover-text: var(--nase-barva-kontrast);
}

a {
    color: var (--nase-barva);
}

a:hover {
    color: var(--hover-text);
    background-color: var(--hover-pozadi);
}

.invertovat {
    background-color: var(--nase-barva);
    color: var (--nase-barva-text);
    --hover-pozadi: var(--nase-barva-kontrast);
    --hover-text: var(--nase-barva);
}

Podívejte se na příklad.

Skládání hodnot

Jak jste viděli, při definici proměnné lze využít hodnotu jiné proměnné. Pravá strana ale nemusí být vždy jen jednoduchým odkazem na proměnnou. Hodnota může být složitější a proměnné mohou být jejími součástmi. Jako příklad poslouží třeba následující nastavení odsazení bloku:

:root {
    --maly: 0.5rem;
    --stredni: 1rem;
}

.blok {
    padding: var(--maly) var(--stredni);
}

Dost populární je také skládání barev po složkách, zejména v barevných režimech, jejichž složky udávají odstín, sytost a světlost barvy, například HSL:

:root {
    --barva-h: 169;
    --barva-s: 67%;
    --barva-l: 22%;
    --nase-barva: hsl(var(--barva-h), var(--barva-s), var(--barva-l));
}

S výhodou lze pak kombinovat proměnné s funkcí calc() a úpravami hodnoty složek pro světlost a sytost vytvářet barevné varianty odvozené ze společného odstínu. Například tmavší barvu lze jednoduše vytvořit zmenšením složky pro světlost:

    --nase-barva-tmavsi: hsl(
        var(--barva-h),
        var(--barva-s),
        calc(var(--barva-l) - 10%));

Budete-li zesvětlovat, může vzniknout barva příliš jásavá, která bude vyžadovat snížení sytosti, aby příliš nekřičela. Tento přístup ilustruje náš další příklad.