Siirry pääsisältöön

CSS Variables

Avaa ChatGPT:ssä

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

Toisin kuin perinteiset lähestymistavat, jotka luottivat CSS-esikäsittelijöihin kuten SASS tai LESS, CSS-muuttujat mahdollistavat dynaamisen tyylittelyn ajon aikana. 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ääritellään kaksoisdashilla (--) ja ne voidaan rajoittaa mihin tahansa CSS-valitsimeen. Yleisintä käytäntöä on määrittää ne :root-valitsimessa, mikä rajoittaa ne globaalisti.

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

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

CSS-muuttujat voivat sisältää mitä tahansa merkkijonoja, eivät vain voimassa olevia CSS-arvoja. Tämä joustavuus on erityisen hyödyllistä työskennellessäsi JavaScriptin kanssa.

html {
  --app-title: webforJ;
}

Komponentti-spesifiset muuttujat​

Määrittääksesi tai ohjataksesi muuttujan tietyssä komponentissa, ilmoita se komponentin valitsimen sisällä:

dwc-button {
  --dwc-button-font-weight: 400;
}
Komponentti-spesifinen tyylikirjasto

Jokainen webforJ-komponentti tukee tiettyä joukkoa CSS-muuttujia, jotka hallitsevat sen ulkoasua. Nämä on dokumentoitu Tyylit > CSS-ominaisuudet-osiolla jokaiselle komponentille.

CSS-muuttujien käyttäminen​

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

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

Voit myös määrittää varaympäristön, jos muuttujaa ei ole määritelty:

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

Muuttujien käsittely webforJ:llä​

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

// Aseta CSS-muuttuja
button.setStyle('--dwc-button-font-weight', '400');
CSS-muuttujien käsittely JavaScriptillä

webforJ mahdollistaa JavaScriptin suorittamisen asiakaspuolella Page- tai Element API:n avulla. Tämä tarkoittaa, että voit dynaamisesti manipuloida CSS-muuttujia ajon aikana aivan kuten standardeissa verkkosovelluksissa.

// Aseta 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​