Příklad – Proměnné a dědičnost

Toto je běžný text obsahující odkaz. Po najetí myší na text odkazu se vymění jeho barva textu a pozadí. Jsou definovány pomocí proměnných následovně:

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

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

Třídy zluty a cerveny použité u následujících bloků jednoduše mění hodnoty proměnných --odkaz-text a --odkaz-pozadi. Jejich hodnota se určuje standardní kaskádou a rozhodne o ní vždy nejbližší předek odkazu, který má přiřazenu třídu. Díky tomu jsou barvy odkazů konzistentní bez ohledu na to, jak hluboko jsou bloky vnořeny do sebe.

Tento blok má přiřazenu třídu zluty, která pomocí proměnných změní barvu odkazu.

Tento blok má přiřazenu třídu cerveny, která pomocí proměnných změní barvu odkazu.

Teď do sebe několik bloků vnoříme. Tento blok má přiřazenu třídu zluty, která pomocí proměnných změní barvu odkazu.

Tento blok má přiřazenu třídu cerveny, která pomocí proměnných změní barvu odkazu.

Tento blok má přiřazenu třídu zluty, která pomocí proměnných změní barvu odkazu.

Tento blok má přiřazenu třídu cerveny, která pomocí proměnných změní barvu odkazu.

Tento blok má přiřazenu třídu zluty, která pomocí proměnných změní barvu odkazu.

zpět: CSS proměnné