CSS zmienne

CSS zmienne

Funkcja var() jest używana do wstawienia wartości zmiennych CSS.

Zmienne CSS mogą uzyskać dostęp do DOM, co oznacza, że możesz tworzyć zmienne o zasięgu lokalnym lub globalnym, używać JavaScript do zmiany zmiennych oraz zmieniać zmienne na podstawie zapytań media.

Dobrym sposobem użycia zmiennych CSS jest przechowywanie kolorów projektowych. Możesz je umieścić w zmiennych, bez potrzeby wielokrotnego kopiowania i wklejania tych samych kolorów.

Tradycyjny sposób

Poniższy przykład pokazuje tradycyjny sposób definiowania kolorów w stylu (dla każdego elementu definiując używany kolor):

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;
}

Spróbuj sam

Gramatyka funkcji var()

Funkcja var() jest używana do wstawienia wartości zmiennych CSS.

Gramatyka funkcji var() wygląda następująco:

var(name, value)
Wartość Opis
name Wymagane. Nazwa zmiennej (zaczynająca się od dwóch myślników).
value Opcjonalnie. Wartość domyślna (używana, gdy zmienna nie zostanie znaleziona).

Uwaga:Nazwa zmiennej musi zaczynać się od dwóch myślników (--), a jest wrażliwa na wielkość liter!

Jak działa var()

Po pierwsze: CSS zmienne mogą mieć zasięg globalny lub lokalny.

Zmienne globalne mogą być dostępne i używane w całym dokumencie, podczas gdy zmienne lokalne są dostępne tylko w selektorze, w którym są deklarowane.

Aby utworzyć zmienną o zasięgu globalnym, deklaruj ją w selektorze :root. Selektor :root dopasowuje do elementu korzenia dokumentu.

Aby utworzyć zmienną o zasięgu lokalnym, deklaruj ją w selektorze, w którym ma być używana.

Poniższy przykład jest taki sam jak poprzedni, ale tutaj używamy funkcji var().

Po pierwsze, deklarujemy dwie zmienne globalne (--blue i --white). Następnie, używamy funkcji var() do wstawienia wartości zmiennych w stylu, który będzie używany później:

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;
}

Spróbuj sam

Użycie var() ma następujące zalety:

  • Ułatwia czytanie kodu (łatwiejsze zrozumienie)
  • Ułatwia zmianę wartości kolorów

Jeśli chcesz zmienić niebieski i biały na bardziej delikatne odcienie, 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;
}

Spróbuj sam

Obsługa przeglądarek

Liczby w tabeli wskazują na pierwszą wersję przeglądarki, która w pełni obsługuje tę właściwość.

Funkcja
var() 49.0 15.0 31.0 9.1 36.0

Funkcja CSS var()

Funkcja Opis
var() Wprowadź wartość zmiennej CSS