CSS-veranderlikes - Die var()-funksie
CSS veranderlikes
Die var()funksie word gebruik om die waarde van 'n CSS-veranderlike in te voeg.
CSS-veranderlikes het toegang tot die DOM, wat beteken dat jy veranderlikes met plaaslike of globale omvang kan skep, die veranderlikes met JavaScript kan verander en die veranderlikes kan verander op grond van medianavrae.
'n Goeie manier om CSS-veranderlikes te gebruik, is wanneer dit kom by die kleure van jou ontwerp. In plaas daarvan om dieselfde kleure oor en oor te kopieer en plak, kan jy dit in veranderlikes plaas.
Die Tradisionele Weg
Die volgende voorbeeld toon die tradisionele manier om sommige kleure in 'n stylblad te definieer (deur die kleure om te gebruik, vir elke spesifieke element te definieer):
Voorbeeld
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;
}
Sintaksis van die var() funksie
Die var()funksie word gebruik om die waarde van 'n CSS-veranderlike in te voeg.
Die sintaksis van die var()funksie is soos volg:
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) |
Let wel: Die veranderlike naam moet met twee strepies (--) begin en dit is hooflettersensitief!
Hoe var() werk
Eerstens: CSS-veranderlikes kan 'n globale of plaaslike omvang hê.
Globale veranderlikes kan deur die hele dokument verkry/gebruik word, terwyl plaaslike veranderlikes slegs binne die kieser gebruik kan word waar dit verklaar is.
Om 'n veranderlike met globale omvang te skep, verklaar dit binne die :root
kieser. Die :rootkieser pas by die dokument se wortelelement.
Om 'n veranderlike met plaaslike omvang te skep, verklaar dit binne die kieser wat dit gaan gebruik.
Die volgende voorbeeld is gelyk aan die voorbeeld hierbo, maar hier gebruik ons die var()funksie.
Eerstens verklaar ons twee globale veranderlikes (--blou en -wit). Dan gebruik ons die
var()funksie om die waarde van die veranderlikes later in die stylblad in te voeg:
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;
}
Voordele van die gebruik van var() is:
- maak die kode makliker om te lees (meer verstaanbaar)
- maak dit baie makliker om die kleurwaardes te verander
Om die blou en wit kleur na 'n sagter blou en wit te verander, hoef jy net die twee veranderlike waardes te verander:
Voorbeeld
: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;
}
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 |