Zmienne CSS — funkcja var()
Zmienne CSS
Funkcja var()służy do wstawiania wartości zmiennej CSS.
Zmienne CSS mają dostęp do DOM, co oznacza, że możesz tworzyć zmienne o zasięgu lokalnym lub globalnym, zmieniać zmienne za pomocą JavaScript i zmieniać zmienne na podstawie zapytań o media.
Dobrym sposobem na wykorzystanie zmiennych CSS jest użycie kolorów w projekcie. Zamiast kopiować i wklejać te same kolory w kółko, możesz umieścić je w zmiennych.
Tradycyjny sposób
Poniższy przykład pokazuje tradycyjny sposób definiowania niektórych kolorów w arkuszu stylów (poprzez zdefiniowanie kolorów do użycia dla każdego konkretnego elementu):
Przykład
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;
}
Składnia funkcji var()
Funkcja var()służy do wstawiania wartości zmiennej CSS.
Składnia var()funkcji jest następująca:
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) |
Uwaga: Nazwa zmiennej musi zaczynać się od dwóch myślników (--) i uwzględniana jest wielkość liter!
Jak działa var()?
Po pierwsze: zmienne CSS mogą mieć zasięg globalny lub lokalny.
Zmienne globalne są dostępne/używane w całym dokumencie, podczas gdy zmiennych lokalnych można używać tylko w selektorze, w którym są zadeklarowane.
Aby utworzyć zmienną o zasięgu globalnym, zadeklaruj ją w :root
selektorze. Selektor :rootpasuje do głównego elementu dokumentu.
Aby utworzyć zmienną o zasięgu lokalnym, zadeklaruj ją w selektorze, który będzie jej używał.
Poniższy przykład jest równy powyższemu przykładowi, ale tutaj używamy var()funkcji.
Najpierw deklarujemy dwie zmienne globalne (--blue i --white). Następnie używamy
var()funkcji do wstawienia wartości zmiennych później w arkuszu stylów:
Przykład
: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;
}
Zalety korzystania z var() to:
- sprawia, że kod jest łatwiejszy do odczytania (bardziej zrozumiały)
- znacznie ułatwia zmianę wartości kolorów
Aby zmienić kolor niebieski i biały na bardziej miękki niebiesko-biały, wystarczy zmienić dwie wartości zmiennych:
Przykład
: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;
}
Obsługa przeglądarki
Liczby w tabeli określają pierwszą wersję przeglądarki, która w pełni obsługuje tę
var()funkcję.
| Function | |||||
|---|---|---|---|---|---|
| var() | 49.0 | 15.0 | 31.0 | 9.1 | 36.0 |
CSS var() Funkcja
| Property | Description |
|---|---|
| var() | Inserts the value of a CSS variable |