Čtenáři jako vy pomáhají podporovat MUO. Když provedete nákup pomocí odkazů na našich stránkách, můžeme získat provizi přidružené společnosti. Přečtěte si více.

Proměnné CSS, známé také jako uživatelské vlastnosti, vám pomohou minimalizovat opakování ve vašich šablonách stylů. To vám zase pomůže ušetřit čas a úsilí při provádění změn ve vašem návrhu. Můžete si být také jisti, že vám neuniknou žádné hodnoty, které potřebujete aktualizovat.

Přístup k modelu DOM vám umožňuje vytvářet proměnné, ukládat je a znovu je používat v rámci vaší šablony stylů.

Jak definovat a používat proměnné CSS

Chcete-li, aby byly vaše šablony stylů lépe uspořádané, udržovatelné a znovu použitelné, můžete použít proměnné CSS v jakékoli vlastnosti, která přijímá hodnotu.

Vezměte si následující příklad souboru HTML a souboru CSS, který nepoužívá proměnné CSS.

HTML:

html>
<htmllang="en">
<hlava>
<titul>Proměnné CSS – Variace tlačítektitul>
<odkazrel="stylesheet"href="Proměnné.css" />
hlava>
<tělo>
<div>
<h1>CSS proměnnéh1>
<div>
instagram viewer

CSS:

.btn {
vycpávka: 1rem 1.5rem;
 pozadí: průhledné;
 váha písma: 700;
 červená barva;
}

Vaše stránka by měla vypadat takto:

The .btn třída použitá ve výše uvedené šabloně stylů není dynamická a způsobuje vytvoření samostatné třídy pro přizpůsobení jednotlivých tlačítek. Vytváření krásných webových stránek vyžaduje, abyste byli ve stylu front-endu dynamičtí. Implementace tlačítek tímto způsobem jednoduše způsobí, že tento úkol bude obtížné dosáhnout.

Jako většina programovacích jazyků musíte inicializovat a nahradit proměnné CSS.

Chcete-li inicializovat proměnnou CSS, přidejte před název proměnné dvojité pomlčky:

:vykořenit{
/*proměnná CSS*/
--název_proměnné: hodnota;
}

Proměnnou můžete inicializovat kdekoli, ale mějte na paměti, že tuto proměnnou budete moci použít pouze uvnitř inicializovaného selektoru. Z tohoto důvodu jsou proměnné CSS konvenčně inicializovány v kořenovém selektoru. To se zaměřuje na prvek DOM nejvyšší úrovně a umožňuje, aby byly proměnné přístupné pro celý dokument HTML v globálním měřítku.

K nahrazení proměnné do stylů CSS použijete var() vlastnictví:

:vykořenit {
/*proměnná CSS*/
 --hlavní: #900c3f;
 --sekundární: #ff5733;
}
.btn {
vycpávka: 1rem 1.5rem;
 pozadí: průhledné;
 váha písma: 700;
 barva: var(--hlavní);
 barva pozadí: var(--sekundární);
}
.sub-primární {
 barva: var(--sekundární);
 barva pozadí: var(--hlavní);
}

Kořenový selektor obsahuje dvě proměnné: --hlavní a --sekundární. Obě proměnné jsou pak nahrazeny do .btn třídu jako barvu a barvu pozadí.

Pomocí proměnných můžete mnohem snadněji stylovat jednotlivé prvky. Opětovným použitím proměnných můžete rychle jednou změnit hodnotu a aktualizovat ji v každém případě.

The var() vlastnost může mít i druhý argument. Tento argument funguje jako záložní hodnota pro první argument v situaci, kdy první není definován nebo je neplatný.

Například:

:vykořenit {
 --hlavní: #900c3f;
 --sekundární: #ff5733;
}
.btn {
vycpávka: 1rem 1.5rem;
 pozadí: průhledné;
 váha písma: 700;
 barva: var(--primární, modrá);
}

V tomto příkladu nahraďte --hlavní variabilní do barva styl. Pokud z nějakého důvodu tato hodnota selže, šablona stylů použije druhou hodnotu jako záložní. Jako záložní hodnotu můžete také použít jinou proměnnou CSS.

Manipulace a přepisování proměnných CSS pomocí JavaScriptu

Manipulace s proměnnými CSS pomocí JavaScriptu může být účinným způsobem, jak změnit vzhled a dojem z vašeho webu za běhu. Pomocí JavaScriptu můžete aktualizovat hodnoty těchto proměnných a vidět změny, které se projeví na vašem webu.

Je důležité si uvědomit, že změny provedené pomocí JavaScriptu se budou vztahovat pouze na aktuální relaci. Musíte buď aktualizovat původní zdroj nebo uložit novou hodnotu na klienta, jako v souboru cookie, aby změny trvaly.

Zde je příklad, jak pomocí JavaScriptu aktualizovat hodnotu proměnné CSS.

HTML:

html>
<htmllang="en">
<hlava>
<titul>Proměnné CSS – Variace tlačítektitul>
<odkazrel="stylesheet"href="Proměnné.css" />
<skript>
funkcezměnit barvu() {
// Získejte prvek, na kterém chcete změnit proměnnou
konst myElement = dokument.querySelector(":vykořenit");
// Získá aktuální hodnotu proměnné
nechat currentValue = getComputedStyle (myElement).getPropertyValue(
"--sekundární"
 );
 // Soubor a Novýhodnotapro a variabilní
myElement.styl.setProperty("--sekundární", "#DAF7A6");
 }
skript>
hlava>
<tělo>
<div>
<h1>CSS proměnnéh1>
<div>

CSS:

:vykořenit {
 --hlavní: #900c3f;
 --sekundární: #ff5733;
}
.btn {
vycpávka: 1rem 1.5rem;
 pozadí: průhledné;
 váha písma: 700;
}
.sub-primární {
 barva: var(--hlavní);
 barva pozadí: var(--sekundární);
}

V tomto kódu JavaScript je změnit barvu() funkce aktualizuje barvu prvního tlačítka, když na něj uživatel klikne.

Použitím Metody procházení DOM, můžete přistupovat ke třídám nebo selektorům použitým ve vašem dokumentu HTML a manipulovat s hodnotami.

Před kliknutím na tlačítko:

Po kliknutí na tlačítko:

JavaScript můžete také použít k vytvoření nových proměnných CSS nebo k jejich úplnému odstranění.

Například:

// Vytvořit A Novývariabilní
dokument.documentElement.style.setProperty('--new-color', 'modrý');
// Odebere proměnnou
dokument.documentElement.style.removeProperty('--new-color');

Použití proměnných CSS s preprocesory

Použití proměnných v rámci frontendové technologie bylo zpočátku dosaženo pomocí CSS preprocesorů, jako jsou SASS, LESS a Stylus.

Účelem preprocesorů CSS je vyvinout kód, který rozšiřuje základní možnosti standardního CSS. Pak nechte tento kód zkompilovat do standardního CSS, aby mu prohlížeč rozuměl, podobně jako jak TypeScript pracuje s JavaScriptem.

S rozvojem proměnných CSS již preprocesory nejsou tak důležité, ale stále mohou nabídnout určité využití, pokud jsou ve vašem projektu kombinovány s proměnnými CSS.

Můžete definovat proměnnou SASS $hlavní barva a použijte jej k nastavení hodnoty proměnné CSS. Poté použijte proměnnou CSS v běžné třídě stylu.

K manipulaci s hodnotami proměnných CSS můžete také použít funkce SASS.

Například:

:vykořenit {
 --primary: $main-color;
 --sekundární: zesvětlit(var(--hlavní), 20%);
}
.btn {
 barva: var(--hlavní);
 barva pozadí: var(--sekundární);
}

Zde je funkce SASS zesvětlit() manipuluje s hodnotou --hlavní získat hodnotu pro --sekundární.

Pamatujte, že proměnné SASS nejsou přístupné pomocí JavaScriptu. Pokud tedy potřebujete manipulovat s hodnotami svých proměnných za běhu, měli byste použít proměnné CSS.

Při společném použití proměnných CSS a preprocesorů můžete využít obou výhod, například používání výkonné funkce preprocesoru, jako jsou smyčky a funkce, a funkce proměnných CSS, jako je CSS kaskádové.

Tipy pro používání proměnných CSS při vývoji webu

Zde je několik důležitých tipů, které vám pomohou lépe využívat proměnné CSS.

Začněte s jasnou konvencí pojmenování

Zvolte konvenci pojmenování proměnných, která jim usnadní pochopení a použití. Například použijte předponu jako např --barva- pro barevné proměnné popř --vzdálenost- pro mezery proměnných.

Pomocí proměnných v dotazech na média usnadněte přizpůsobení návrhu pro různé velikosti obrazovky.

Využijte kaskádové povahy CSS

Pamatujte, že proměnné CSS jsou kaskádové, což znamená, že pokud nastavíte proměnnou na nadřazený prvek, ovlivní to všechny jeho potomky.

Používejte proměnné CSS s opatrností

Používání příliš mnoha proměnných CSS může způsobit zmatek, proto je používejte opatrně a pouze tehdy, když to dává smysl a zlepšuje udržovatelnost vašeho kódu.

Otestujte své proměnné

Proměnné CSS jsou jedinečným způsobem, jak psát jasný a udržovatelný kód ve vaší šabloně stylů.

Je důležité poznamenat, že stále nejsou plně podporovány ve všech prohlížečích. Proto byste měli otestovat kompatibilitu svých proměnných s prohlížečem, abyste se ujistili, že fungují podle očekávání a že všechny záložní hodnoty fungují tak, jak očekáváte.