Muuttujat

CSS-muuttujat, tunnetaan myös nimellä CSS custom properties, mahdollistavat uudelleenkäytettävien arvojen määrittelyn koko CSS-koodissa. Muuttujien avulla voidaan luoda dynaamisia ja joustavia suunnitelmia, joita on helpompi ylläpitää ja päivittää.

Muuttuja määritellään käyttämällä :root-valepseudoluokkaa CSS-tiedoston alussa ja lisäämällä muuttujan nimen eteen --. Esimerkiksi määritellään --blue-color-muuttuja arvolla #3f42f3 :root-lohkoon:

:root {
  --blue-color: #3f42f3;
}

Kun muuttuja on määritelty, sitä voidaan käyttää missä tahansa CSS-ominaisuudessa var()-funktion avulla. Esimerkiksi, jos halutaan asettaa color-elementin <h1>-ominaisuudeksi --blue-color-muuttujan arvo, voidaan kirjoittaa:

h1 {
  color: var(--blue-color);
}

Yhdistetään muuttujan määrittely ja käyttö seuraavassa esimerkissä:

Tässä esimerkissä määritellään ja käytetään viittä muuttujaa eri ominaisuuksissa. Muuttujien arvoja muuttamalla voidaan helposti päivittää värit koko tyylitiedostossa.

Ominaisuuksien ylikirjoittaminen

Joskus CSS:ssä täytyy ylikirjoittaa tiettyjä ominaisuuksia halutun ulkoasun saavuttamiseksi. Tämä onnistuu määrittelemällä sama ominaisuus uudelleen sisäkkäisessä valitsimessa ja antamalla sille uusi arvo.

Tarkastellaan seuraavaa esimerkkiä liikennevaloista, joissa on eri väriset valot:

Kohdistamalla tiettyihin signal-luokkiin voidaan hienosäätää kunkin signaalin väriä säilyttäen samalla yhteiset tyylit, jotka on määritelty perusvalitsimessa .signal.

Huomautus

Lopuksi, CSS-muuttujat tarjoavat joustavuutta ja ylläpidettävyyttä mahdollistaen dynaamiset suunnittelupäivitykset, kun taas ominaisuuksien ylikirjoittaminen mahdollistaa tyylien hienosäädön ja haluttujen visuaalisten vaikutusten saavuttamisen.