Cheatsheet, amely segít emlékezni a CSS egyéni tulajdonságaira

A CSS egyéni tulajdonságok, más néven CSS-változók, olyan egyéni tulajdonságokat képviselnek, amelyek deklarálhatók és meghívhatók a CSS-ben.

Nyilvánítson egyéni tulajdonságot a CSS-ben

Egyéni tulajdonság deklarálásához a CSS-ben a --szintaxist kell használnia :

:root { --colorPrimary: hsla(360, 100%, 74%, 0.6); }

Figyelje meg az :rootál-osztály választót - a változókat globálisan deklarálhatjuk annak használatával. Kijelölhetjük őket más szelektorok használatával is, és akkor ezekben a hatókörbe kerülnek.

.theme-dark { --colorPrimary: hsla(360, 100%, 24%, 0.6); }

Használjon egyéni tulajdonságot a CSS-ben

CSS egyéni tulajdonság használatához a CSS-ben a következő var()funkciót használhatja:

:root { --colorPrimary: tomato; } .theme-dark { --colorPrimary: lime; } body { background-color: var(--colorPrimary); }

Ebben az esetben bodya háttérszíne tomato, de body.theme-darka lime.

Használjon egyedi tulajdonságokat egységek nélkül

A CSS egyéni tulajdonságai egységek nélkül deklarálhatók, ha a calc()funkcióval együtt használják őket .

:root { --spacing: 2; } .container { padding: var(--spacing) px; /*Doesn't Work ?*/ padding: calc(var(--spacing) * 1rem); /*Will output 2rem ?*/ }

Használjon egyedi tulajdonságokat a JavaScript használatával

Egyéni tulajdonság megszerzéséhez a következőket használhatjuk:

getComputedStyle(element).getPropertyValue("--my-var"); // Or if inline element.style.getPropertyValue("--my-var");

Az egyéni tulajdonság értékének frissítése:

element.style.setProperty("--my-var", newVal);

Példa értékek lekérésére és cseréjére:

A következő példában a dat.gui vezérlőkönyvtárat használjuk a --scenePerspective, --cubeRotateY és --cubeRotateX egyéni tulajdonságok értékének megváltoztatására. Ez a módszer megkönnyíti az új stílus alkalmazását, mivel nem kell inline stílust alkalmazni minden egyes DOM elemre.

Köszönöm, hogy elolvasta!

Erőforrások

Egyéni tulajdonságok meghatározása: a - * tulajdonságcsalád

Egyéni tulajdonságok: CSS-változók - MDN

var () - MDN

CSS egyéni tulajdonságok (változók) használata - MDN

Több cikkemet elolvashatja a blogomon.