CSS-oorheersende veranderlikes
Ignoreer globale veranderlike met plaaslike veranderlike
Op die vorige bladsy het ons geleer dat globale veranderlikes deur die hele dokument verkry/gebruik kan word, terwyl plaaslike veranderlikes slegs binne die kieser gebruik kan word waar dit verklaar is.
Kyk na die voorbeeld van die vorige bladsy:
Voorbeeld
: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;
}
Soms wil ons hê dat die veranderlikes net in 'n spesifieke afdeling van die bladsy moet verander.
Gestel ons wil 'n ander kleur blou vir knoppie-elemente hê. Dan kan ons die --blue veranderlike binne die knoppie-kieser weer verklaar. Wanneer ons var(--blue) binne hierdie kieser gebruik, sal dit die plaaslike --blue veranderlike waarde gebruik wat hier verklaar word.
Ons sien dat die plaaslike --blue veranderlike die globale --blue veranderlike vir die knoppie elemente sal ignoreer:
Voorbeeld
: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;
}
Voeg 'n nuwe plaaslike veranderlike by
As 'n veranderlike slegs een enkele plek gebruik moet word, kon ons ook 'n nuwe plaaslike veranderlike verklaar het, soos volg:
Voorbeeld
: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;
}
Blaaierondersteuning
Die nommers in die tabel spesifiseer die eerste blaaierweergawe wat die
var()funksie ten volle ondersteun.
| Function | |||||
|---|---|---|---|---|---|
| var() | 49.0 | 15.0 | 31.0 | 9.1 | 36.0 |
CSS var() Funksie
| Property | Description |
|---|---|
| var() | Inserts the value of a CSS variable |