Proměnné CSS – Funkce var().
CSS proměnné
Funkce var()se používá k vložení hodnoty proměnné CSS.
Proměnné CSS mají přístup k DOM, což znamená, že můžete vytvářet proměnné s místním nebo globálním rozsahem, měnit proměnné pomocí JavaScriptu a měnit proměnné na základě mediálních dotazů.
Dobrý způsob, jak použít proměnné CSS, je, pokud jde o barvy vašeho návrhu. Místo kopírování a vkládání stejných barev znovu a znovu je můžete umístit do proměnných.
Tradiční způsob
Následující příklad ukazuje tradiční způsob definování některých barev v šabloně stylů (definováním barev, které se mají použít pro každý konkrétní prvek):
Příklad
body { background-color: #1e90ff; }
h2 { border-bottom: 2px solid #1e90ff; }
.container {
color:
#1e90ff;
background-color: #ffffff;
padding: 15px;
}
button {
background-color: #ffffff;
color: #1e90ff;
border: 1px
solid #1e90ff;
padding: 5px;
}
Syntaxe funkce var().
Funkce var()se používá k vložení hodnoty proměnné CSS.
Syntaxe var()funkce je následující:
var(--name, value)
| Value | Description |
|---|---|
| name | Required. The variable name (must start with two dashes) |
| value | Optional. The fallback value (used if the variable is not found) |
Poznámka: Název proměnné musí začínat dvěma pomlčkami (--) a rozlišují se malá a velká písmena!
Jak var() funguje
Za prvé: CSS proměnné mohou mít globální nebo lokální rozsah.
Ke globálním proměnným lze přistupovat/používat je v celém dokumentu, zatímco k lokálním proměnným lze přistupovat pouze uvnitř selektoru, kde jsou deklarovány.
Chcete-li vytvořit proměnnou s globálním rozsahem, deklarujte ji uvnitř :root
selektoru. :rootSelektor odpovídá kořenovému prvku dokumentu .
Chcete-li vytvořit proměnnou s místním rozsahem, deklarujte ji uvnitř selektoru, který ji bude používat.
Následující příklad se rovná příkladu výše, ale zde použijeme var()funkci.
Nejprve deklarujeme dvě globální proměnné (--blue a --white). Potom použijeme
var()funkci k vložení hodnoty proměnných později do šablony stylů:
Příklad
:root {
--blue: #1e90ff;
--white: #ffffff;
}
body { background-color: var(--blue); }
h2 { border-bottom: 2px solid var(--blue); }
.container {
color: var(--blue);
background-color: var(--white);
padding:
15px;
}
button {
background-color: var(--white);
color: var(--blue);
border: 1px solid var(--blue);
padding: 5px;
}
Výhody použití var() jsou:
- usnadňuje čtení kódu (srozumitelnější)
- výrazně usnadňuje změnu hodnot barev
Chcete-li změnit modrou a bílou barvu na jemnější modrou a bílou, stačí změnit dvě proměnné hodnoty:
Příklad
:root {
--blue: #6495ed;
--white: #faf0e6;
}
body { background-color: var(--blue); }
h2 { border-bottom: 2px solid var(--blue); }
.container {
color: var(--blue);
background-color: var(--white);
padding:
15px;
}
button {
background-color: var(--white);
color: var(--blue);
border: 1px solid var(--blue);
padding: 5px;
}
Podpora prohlížeče
Čísla v tabulce určují první verzi prohlížeče, která tuto
var()funkci plně podporuje.
| Function | |||||
|---|---|---|---|---|---|
| var() | 49.0 | 15.0 | 31.0 | 9.1 | 36.0 |
Funkce CSS var().
| Property | Description |
|---|---|
| var() | Inserts the value of a CSS variable |