Většina webových stránek používá CSS k vyleštění jejich vzhledu a stylu různých komponent webových stránek. CSS, neboli kaskádové styly, není technicky programovací jazyk. CSS však lze použít s programovacími jazyky, jako je JavaScript, k vytvoření responzivních a interaktivních webových stránek.
Pokud jste použili programovací jazyky, jako je JavaScript, víte, že můžete deklarovat proměnnou, přiřadit jí hodnotu a znovu ji použít v různých částech kódu. Dobrou zprávou je, že stejný koncept můžete použít i v CSS.
Tento článek bude definovat proměnné CSS, popíše jejich výhody a ukáže vám, jak deklarovat a používat proměnnou v CSS.
Table of Contents
Co jsou proměnné v CSS?
Proměnné CSS jsou vlastní vlastnosti, které umožňují webovým vývojářům ukládat hodnoty, které mohou znovu použít prostřednictvím šablony stylů. Můžete například deklarovat styl písma, barvu pozadí a velikost písma, které můžete znovu použít s prvky, jako jsou nadpisy, odstavce a prvky div ve vaší kódové základně.
Proč používat proměnné CSS? Toto jsou některé z důvodů;
- Usnadňuje aktualizaci kódu: Jakmile deklarujete proměnnou, můžete znovu použít celou šablonu stylů, aniž byste museli ručně aktualizovat každý prvek.
- Snižuje opakování: Jak vaše kódová základna roste, zjistíte, že máte podobné třídy a prvky. Místo psaní kódu CSS pro každou položku můžete jednoduše použít proměnné CSS.
- Umožňuje lépe udržovat váš kód: Údržba kódu je důležitá, pokud chcete, aby vaše podnikání fungovalo.
- Zlepšuje čitelnost: Moderní svět podporuje spolupráci. Použití proměnných v CSS má za následek kompaktní kódovou základnu, která je čitelná.
- Snadné udržování konzistence: Proměnné CSS vám mohou pomoci udržet konzistentní styl při růstu zdrojového kódu nebo velikosti aplikace. Můžete například deklarovat okraje, výplň, styl písma a barvy, které se mají použít ve vašich tlačítkách na webu.
Jak deklarovat proměnné v CSS
Protože víte, co jsou proměnné v CSS a proč byste je měli používat, můžeme pokračovat a ukázat, jak je deklarovat.
Chcete-li deklarovat proměnnou CSS, začněte názvem prvku a poté napište dvě pomlčky (–), požadovaný název a hodnotu. Základní syntaxe je;
element {
--variable-name: value;
}
Pokud například chcete použít výplň v celém dokumentu, můžete jej deklarovat jako;
body {
--padding: 1rem;
}
Rozsah proměnných v CSS
Proměnné CSS mohou mít rozsah lokálně (dostupné v rámci konkrétního prvku) nebo globálně (dostupné v celé šabloně stylů).
Lokální proměnné
Místní proměnné se přidávají do konkrétních selektorů. Můžete je například přidat do tlačítka. Toto je příklad;
.button {
--button-bg-color: #33ff4e;
}
Proměnná barva pozadí je k dispozici na voliči tlačítka a jeho potomcích.
Globální proměnné
Po deklaraci můžete globální proměnné použít s jakýmkoli prvkem v kódu. K deklaraci globálních proměnných používáme pseudotřídu :root. Takto je prohlašujeme;
:root {
--primary-color: grey;
--secondary-color: orange;
--font-weight: 700:
}
Ve výše uvedeném kódu můžete použít kteroukoli z proměnných deklarovaných s různými prvky, jako jsou nadpisy, odstavce, divs nebo dokonce celé tělo.
Jak používat proměnné v CSS
Vytvoříme projekt pro demonstrační účely a přidáme soubory index.html a styles.css.
V souboru index.html můžeme mít jednoduchý div se dvěma nadpisy ( h1 a h2) a odstavcem (p).
<div> <h1>Hello Front-end Dev!!!!</h1> <h2>This is how to use variables in CSS.</h2> <p> Keep scrolling</p> </div>
V souboru style.css můžeme mít následující;
:root {
--primary-color: grey;
--secondary-color: orange;
--font-weight: 700:
--font-size: 16px;
--font-style: italic;
}
body {
background-color: var(--primary-color);
font-size: var(--font-size);
}
h1 {
color: var(--secondary-color);
font-style: var(--font-style)
}
h2 {
font-weight: var(--font-weight)
}
p {
font-size: calc(var(--font-size) * 1.2);
}
Po vykreslení webové stránky budeme mít následující;
Z výše uvedeného kódu jsme deklarovali globální proměnné v elementu :root. K použití globální proměnné v kterémkoli z našich prvků musíme použít klíčové slovo var. Například, abychom použili barvu pozadí, kterou jsme deklarovali jako globální proměnnou, prezentujeme náš kód následovně;
background-color: var(–primary-color);
Zkontrolujte všechny ostatní prvky a zaznamenáte trend ve způsobu použití klíčového slova var.
Používejte proměnné CSS s JavaScriptem
Pro ilustraci použití proměnných CSS s JavaScriptem použijeme lokální a globální proměnné.
Můžeme přidat prvek upozornění do našeho stávajícího kódu;
Náš nový dokument index.html bude vypadat následovně;
<div> <h1>Hello Front-end Dev!!!!</h1> <h2>This is how to use variables in CSS.</h2> <p> Keep scrolling</p> </div> <div class="alert">Click me!</div>
Můžeme stylizovat naši proměnnou. Přidejte následující kód do svého stávajícího kódu CSS;
.alert {
--bg-color: red; /* Define local variable */
background-color: var(--bg-color); /* Use the local variable for the background color */
padding: 10px 20px;
border-radius: 4px;
font-weight: var(--font-weight); /*Use the global variable for font weight*/
width: 50px;
}
Udělali jsme následující;
- Definovaná lokální proměnná uvnitř prvku alert;
–bg-color: červená
- Pro přístup k této lokální proměnné bylo použito klíčové slovo var;
background-color: var(–bg-color);
- Použili jsme globální proměnnou, kterou jsme dříve deklarovali jako naši váhu písma;
font-weight: var(–font-weight);
Přidejte kód JavaScript
Můžeme zajistit, aby náš varovný prvek reagoval; když na něj kliknete, zobrazí se ve vašem prohlížeči vyskakovací okno, které říká; „Použili jsme proměnné CSS s JavaScriptem!!!!“.
Kód JavaScript můžeme přidat přímo do kódu HTML tak, že jej uzavřeme pomocí značek . Kód JavaScript by měl následovat za kódem HTML, ale před zavřením značky
