Zmienne nadpisujące CSS
Zastąp zmienną globalną zmienną lokalną
Z poprzedniej strony dowiedzieliśmy się, że do zmiennych globalnych można uzyskać dostęp/używać w całym dokumencie, podczas gdy zmienne lokalne mogą być używane tylko w selektorze, w którym są zadeklarowane.
Spójrz na przykład z poprzedniej strony:
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;
}
Czasami chcemy, aby zmienne zmieniały się tylko w określonej sekcji strony.
Załóżmy, że chcemy mieć inny kolor niebieski dla elementów przycisków. Następnie możemy ponownie zadeklarować zmienną --blue w selektorze przycisku. Kiedy użyjemy var(--blue) wewnątrz tego selektora, użyje on zadeklarowanej tutaj wartości lokalnej zmiennej --blue.
Widzimy, że lokalna zmienna --blue zastąpi globalną zmienną --blue dla elementów przycisku:
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; /* local variable will
override global */
background-color: var(--white);
color: var(--blue);
border: 1px solid var(--blue);
padding: 5px;
}
Dodaj nową zmienną lokalną
Jeśli zmienna ma być używana tylko w jednym miejscu, moglibyśmy również zadeklarować nową zmienną lokalną, na przykład:
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; /* new local
variable */
background-color: var(--white);
color: var(--button-blue);
border: 1px solid var(--button-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 |