CSS peittävät muuttujat

Paikallisten muuttujien korvaaminen globaalilla muuttujalla

Edelliseltä sivulta olemme oppineet, että globaalit muuttujat voidaan käyttää koko dokumentissa ja paikalliset muuttujat vain niissä valitsimissa, joissa ne määritellään.

Katso edelliseltä sivulta esimerkki:

esimerkki

: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;
}

Kokeile itse

Joskus haluamme, että muuttujat muuttuvat vain sivun tiettyyn osaan.

Jos haluamme, että painikeelementti käyttää eri sinistä, voimme uudelleen määrittää --blue-muuttujan button-valitsimessa. Kun käytämme tätä valitsinta var(--blue)-arvon kanssa, se käyttää tässä määriteltyä paikallista --blue-arvoa.

Näemme, että paikallinen --blue-muuttuja korvaa button-elementin globaalin --blue-muuttujan:

esimerkki

: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;
  background-color: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 5px;
}

Kokeile itse

Lisää uusi paikallinen muuttuja

Jos käytämme muuttujaa vain yhdessä paikassa, voimme myös määritellä uuden paikallisen muuttujan, kuten näin:

esimerkki

: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;
  background-color: var(--white);
  color: var(--button-blue);
  border: 1px solid var(--button-blue);
  padding: 5px;
}

Kokeile itse

Selaimen tuki

Taulukossa olevat numerot osoittavat ensimmäisen selaimen version, joka tukee tätä ominaisuutta täysin.

Funktio
var() 49.0 15.0 31.0 9.1 36.0

CSS var() funktio

Funktio Kuvaus
var() Syötä CSS muuttujien arvot.