CSS var() -funktio

Määrittely ja käyttö

CSS:n var() Toiminto lisää CSS-varioiden arvoja.

Esimerkki

Esimerkki 1

Ensiksi, määritä yleinen muuttuja nimeltä --main-bg-color, ja käytä sitä sitten tyyleissä: var() Toiminto lisää muuttujan arvon:

:root {
  --main-bg-color: koralli;
}
#div1 {
  background-color: var(--main-bg-color);
}
#div2 {
  background-color: var(--main-bg-color);
}

Kokeile itse

Esimerkki 2

Toinen käyttö var() Esimerkki CSS-varioiden arvojen lisäämisestä useissa toiminnossa:

:root {
  --main-bg-color: koralli;
  --main-txt-color: sininen;
  --main-padding: 15px;
}
#div1 {
  background-color: var(--main-bg-color);
  color: var(--main-txt-color);
  padding: var(--main-padding);
}
#div2 {
  background-color: var(--main-bg-color);
  color: var(--main-txt-color);
  padding: var(--main-padding);
}

Kokeile itse

CSS-grammatiikka

var(--name, value)

Tekninen yksityiskohta

Selaimen tuki

Taulukon numerot ilmaisevat ensimmäisen selaimen version, joka tukee tätä toimintoa täysin.

Aiheeseen liittyvät sivut

Oppitunnit:CSS muuttujat