CSS spremenljivke (uradno imenovane Custom Properties) so močno orodje za shranjevanje in ponovno uporabo vrednosti v CSS. Za razliko od spremenljivk v preprocesorskih jezikih, kot so SASS ali LESS, so CSS spremenljivke del DOM-a in jih lahko spreminjamo v realnem času z JavaScriptom ali pa jih uporabimo za ustvarjanje dinamičnih tem (npr. preklop med svetlo in temno temo).
Spremenljivke definiramo z znakom -- (npr. --primary-color) in jih uporabimo s funkcijo
var(). Omogočajo centralizirano upravljanje barv, velikosti pisav, razmikov in drugih vrednosti, kar
drastično poenostavi vzdrževanje velikih spletnih strani.
Zgornji primer prikazuje, kako CSS spremenljivke omogočajo dinamično oblikovanje spletne strani. S klikom na gumbe lahko preklapljate med temami, spreminjate barve in razmike v realnem času – brez ponovnega nalaganja strani. Vse spremembe se zgodijo zaradi preproste zamenjave vrednosti spremenljivk v korenu dokumenta.
| Lastnost/Funkcija | Primer | Opis |
|---|---|---|
| Definiranje | ||
--ime-spremenljivke | :root { --primary: #3498db; } |
Definira spremenljivko (začnemo z dvopičjem in dvema črtama) |
Globalno | :root { --spacing: 10px; } |
Definiranje v :root omogoča dostop iz celotnega dokumenta |
Lokalno | .card { --bg: white; } |
Definiranje znotraj določenega elementa (dostopno samo za to in podrejene) |
| Uporaba | ||
var() | color: var(--primary); |
Pridobi vrednost spremenljivke |
var() z defaultom | color: var(--primary, red); |
Pridobi vrednost, če ne obstaja, uporabi privzeto vrednost (red) |
| Dinamične spremembe | ||
JavaScript | document.documentElement.style.setProperty("--primary", "green"); |
Spreminjanje vrednosti spremenljivke z JavaScriptom v realnem času |
Media Queries | @media (prefers-color-scheme: dark) { :root { --bg: #333; } } |
Spreminjanje vrednosti glede na sistemske nastavitve (npr. Dark Mode) |
Hover/Focus | a:hover { --color: blue; } |
Spreminjanje vrednosti ob interakciji uporabnika |
