Et cheatsheet, der hjælper dig med at huske tilpassede CSS-egenskaber

CSS tilpassede egenskaber, også kendt som CSS-variabler, repræsenterer tilpassede egenskaber, der kan erklæres og kaldes i din CSS.

Erklær en brugerdefineret egenskab i CSS

For at erklære en brugerdefineret ejendom i din CSS skal du bruge --syntaksen:

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

Bemærk :rootpseudoklassevælgeren - vi kan erklære vores variabler globalt ved hjælp af den. Vi kan også erklære dem ved hjælp af andre vælgere, og de vil derefter være omfattet af dem.

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

Brug en brugerdefineret egenskab i CSS

For at bruge en tilpasset CSS-egenskab i din CSS kan du bruge var()funktionen:

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

I dette tilfælde bodyhar en baggrundsfarve på tomato, men en body.theme-darkaf lime.

Brug tilpassede egenskaber uden enheder

CSS tilpassede egenskaber kan deklareres uden enheder, hvis de bruges sammen med calc()funktionen.

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

Brug tilpassede egenskaber med JavaScript

For at få en brugerdefineret ejendom kan vi bruge følgende:

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

Sådan opdateres den tilpassede egenskabsværdi:

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

Eksempel på at få og erstatte værdier:

I det følgende eksempel bruger vi dat.gui-controllerbiblioteket til at ændre værdien af ​​--scenePerspective, --cubeRotateY og --cubeRotateX brugerdefinerede egenskaber. Denne metode gør det lettere at anvende en ny stil, da du ikke behøver at anvende inline-stil på hvert DOM-element.

Tak for læsningen!

Ressourcer

Definition af brugerdefinerede egenskaber: familien af ​​egenskaber

Tilpassede egenskaber: CSS-variabler - MDN

var () - MDN

Brug af CSS tilpassede egenskaber (variabler) - MDN

Du kan læse flere af mine artikler på min blog.