Siirry pääsisältöön

CSS Variables

Avaa ChatGPT:ssa

CSS-muuttujat ovat keskeisessä roolissa webforJ-komponenttien ulkoasun mukauttamisessa. Nämä muuttujat tallentavat uudelleenkäytettäviä arvoja, kuten värejä, fonttikokoja ja välejä, joita voidaan soveltaa johdonmukaisesti sovelluksessasi.

Toisin kuin perinteiset lähestymistavat, jotka perustuivat CSS-esikäsittelijöihin kuten SASS tai LESS, CSS-muuttujat mahdollistavat dynaamisten tyylien määrittämisen ajonaikaisesti. Ne vähentävät toistoa, parantavat ylläpidettävyyttä ja tekevät tyylitiedostoista helpommin luettavia ja hallittavia.

CSS-muuttujien määrittäminen​

CSS-muuttujat määritetään käyttämällä kaksoisdashia (--) etuliitteenä, ja ne voidaan rajata mihin tahansa CSS-valitsimeen. Yleisimmät käytännöt ovat määritellä ne :root-valitsimessa, joka rajaa ne globaalisti.

:root {
  --app-background: orange;
}
:root -pseudo-luokka

:root -pseudo-luokka kohdistuu asiakirjan juurielementtiin—yleensä <html> HTML:ssä. Se käyttäytyy kuin html, mutta sillä on suurempi spesifisyys.

CSS-muuttujat voivat sisältää minkä tahansa merkkijonon, eivät vain kelvollisia CSS-arvoja. Tämä joustavuus on erityisen hyödyllistä työskenneltäessä JavaScriptin kanssa.

html {
  --app-title: webforJ;
}

Komponenttikohtaiset muuttujat​

Määritelläksesi tai ohjataksesi muuttujan tietylle komponentille, ilmoita se komponentin valitsimen sisällä:

dwc-button {
  --dwc-button-font-weight: 400;
}
Komponenttikohtainen tyyliviite

Jokainen webforJ-komponentti tukee tiettyä CSS-muuttujien joukkoa, joka ohjaa sen ulkoasua. Nämä on dokumentoitu Tyylit > CSS-ominaisuudet -osiossa jokaiselle komponentille.

CSS-muuttujien käyttäminen​

Käytä var() -funktiota sovellaksesi muuttujan arvoa tyyleihisi:

.panel {
  background-color: var(--app-background);
}

Voit myös määrittää varaväriarvon, jos muuttujaa ei ole määritelty:

.frame {
  background-color: var(--app-background, red);
}

Muuttujien manipulointi webforJ:llä​

CSS-muuttujia voidaan päivittää dynaamisesti webforJ-API:n kautta, mahdollistaen reaaliaikaisen tyylin:

// Määritä CSS-muuttuja
button.setStyle('--dwc-button-font-weight', '400');
CSS-muuttujien manipulointi JavaScriptilla

webforJ mahdollistaa JavaScriptin suorittamisen asiakkaan puolella käyttäen Sivusivun tai Elementin APIa. Tämä tarkoittaa, että voit dynaamisesti manipuloida CSS-muuttujia ajonaikaisesti aivan kuten normaalissa verkkosovelluksessa.

// Määritä CSS-muuttuja
const el = document.querySelector('dwc-button');
el.style.setProperty('--dwc-button-font-weight', '400');

// Hanki CSS-muuttuja
const value = el.style.getPropertyValue('--dwc-font-size-m');

Lisäresurssit​