CSS pokrycie zmiennych

Nadpisanie zmiennych lokalnych zmiennymi globalnymi

Z poprzedniej strony dowiedzieliśmy się, że globalne zmienne można uzyskać i używać w całym dokumencie, podczas gdy lokalne zmienne można używać tylko w selektorze, w którym waszym przypadku został zadeklarowany.

Zobacz przykład na poprzedniej stronie:

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

Czasami chcemy, aby zmienne były zmieniane tylko w określonych częściach strony.

Załóżmy, że chcemy, aby element button używał innego koloru niebieskiego. Możemy ponownie zadeklarować zmienną --blue w selektorze button. Kiedy używamy var(--blue) w tym selektorze, będzie on używał wartości lokalnej zmiennej --blue.

Zobaczymy, że lokalna zmienna --blue nadpisuje globalną zmienną --blue elementu button:

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 {
  --blue: #0000ff;
  background-color: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 5px;
}

Spróbuj sam

Dodaj nową zmienną lokalną

Jeśli używamy zmiennej w jednym miejscu, możemy również zadeklarować nową zmienną lokalną, tak jak tutaj:

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 {
  --button-blue: #0000ff;
  background-color: var(--white);
  color: var(--button-blue);
  border: 1px solid var(--button-blue);
  padding: 5px;
}

Spróbuj sam

Obsługa przeglądarek

Liczby w tabeli oznaczają 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.