CSS- muuttujat

CSS- muuttujat

var() -funktiota käytetään CSS-muuttujien arvojen syöttämiseen.

CSS-muuttujat voivat käyttää DOM:ia, mikä tarkoittaa, että voit luoda paikallis- tai globaalisia muuttujia, muuttaa muuttujia JavaScriptin avulla ja muuttaa muuttujia medianaapureiden perusteella.

Erinomainen tapa käyttää CSS-muuttujia on suunnittelun värien kanssa. Voit sijoittaa ne muuttujiin, ilman että sinun täytyy kopioida ja liittää samat värit useita kertoja.

Perinteinen tapa

Seuraava esimerkki näyttää perinteisen tavan määritellä joitakin värejä (määrittämällä värit jokaiselle erityiselle elementille):

Esimerkki

body { taustaväri: #1e90ff; }
h2 { alapuolireuna: 2px tiivis #1e90ff; }
.container {
  väri: #1e90ff;
  taustaväri: #ffffff;
  padding: 15px;
}
button {
  taustaväri: #ffffff;
  väri: #1e90ff;
  reuna: 1px tiivis #1e90ff;
  padding: 5px;
}

Kokeile itse

var() -funktioiden syntaksi

var() -funktiota käytetään CSS-muuttujien arvojen syöttämiseen.

var() -funktioiden syntaksi on seuraava:

var(nimi, arvo)
Arvo Kuvaus
nimi Välttämätön. Muuttujan nimi (kaksi viivaa eteen).
arvo Valinnainen. Vaihtoehtoinen arvo ( käytetään, jos muuttujaa ei löydy).

Huomautus:Muuttujanimi täytyy aloittaa kahdella viivalla (--), ja se on kirjainmukainen!

Miten var() toimii

Ensimmäinen: CSS-muuttujilla voi olla globaali tai paikallinen alue.

Globaalit muuttujat ovat saatavilla koko dokumentissa ja paikalliset muuttujat vain niiden määrittelyvalitsimen sisällä.

Jos haluat luoda globaalisti vaikuttavan muuttujan, määrittele se :root-valitsimessa. :root-valitsin vastaa dokumentin juurielementtiä.

Jos haluat luoda alueellisesti vaikuttavan muuttujan, määrittele se valitsimessa, jossa sitä käytetään.

Seuraava esimerkki on sama kuin edellinen, mutta tässä käytämme var() -funktiota.

Ensimmäinen askel: määrittelemme kaksi globaalia muuttujaa (--sininen ja --valkoinen). Sitten käytämme var() -funktiota稍后在样式laidassa syöttääksesi muuttujien arvot:

Esimerkki

:root {
  --sininen: #1e90ff;
  --valkoinen: #ffffff;
}
body { taustaväri: var(--sininen); }
h2 { border-bottom: 2px solida var(--blue); }
.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
}
button {
  background-color: var(--white);
  color: var(--blue);
  border: 1px solida var(--blue);
  padding: 5px;
}

Kokeile itse

var() -funktiolla on seuraavat edut:

  • Tekee koodista helpommin luettavaa (helpommin ymmärrettävää)
  • Helpottaa värin muuttamista

Jos haluat muuttaa sinistä ja valkoista pehmeämmiksi siniksi ja valkoiseksi, sinun tarvitsee vain muuttaa kaksi muuttujan arvoa:

Esimerkki

:root {
  --sininen: #6495ed;
  --valkoinen: #faf0e6;
}
body { taustaväri: var(--sininen); }
h2 { border-bottom: 2px solida var(--blue); }
.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
}
button {
  background-color: var(--white);
  color: var(--blue);
  border: 1px solida var(--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-muuttujan arvo.