Huijausarkki, joka auttaa muistamaan CSS: n mukautetut ominaisuudet

Mukautetut CSS-ominaisuudet, jotka tunnetaan myös nimellä CSS-muuttujat, edustavat mukautettuja ominaisuuksia, jotka voidaan ilmoittaa ja kutsua CSS: ssäsi.

Ilmoita mukautettu ominaisuus CSS: ssä

Jos haluat ilmoittaa mukautetun ominaisuuden CSS: ssä, sinun on käytettävä --syntaksia:

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

Huomaa :rootpseudoluokan valitsin - voimme ilmoittaa muuttujamme globaalisti sitä käyttämällä. Voimme myös julistaa heidät käyttämällä muita valitsimia, ja sitten ne valitaan niihin.

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

Käytä mukautettua ominaisuutta CSS: ssä

Jos haluat käyttää mukautettua CSS-ominaisuutta CSS: ssä, voit käyttää var()toimintoa:

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

Tässä tapauksessa bodytulee olemaan taustaväri tomato, vaan body.theme-darkon lime.

Käytä mukautettuja ominaisuuksia ilman yksiköitä

Mukautetut CSS-ominaisuudet voidaan ilmoittaa ilman yksiköitä, jos niitä käytetään calc()toiminnon kanssa.

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

Käytä mukautettuja ominaisuuksia JavaScriptin kanssa

Mukautetun ominaisuuden saamiseksi voimme käyttää seuraavaa:

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

Mukautetun ominaisuuden arvon päivittäminen:

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

Esimerkki arvojen hankkimisesta ja korvaamisesta:

Seuraavassa esimerkissä muutamme dat.gui-ohjainkirjastoa mukauttamalla --scenePerspective, --cubeRotateY ja --cubeRotateX -ominaisuuksia. Tämä menetelmä helpottaa uuden tyylin soveltamista, koska sinun ei tarvitse käyttää sisäistä tyyliä jokaisessa DOM-elementissä.

Kiitos lukemisesta!

Resurssit

Mukautettujen ominaisuuksien määrittely: - * -perheominaisuuksia

Mukautetut ominaisuudet: CSS-muuttujat - MDN

var () - MDN

Mukautettujen CSS-ominaisuuksien (muuttujien) käyttö - MDN

Voit lukea lisää artikkeleitani blogistani.