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 :root
pseudoklassevæ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 body
har en baggrundsfarve på tomato
, men en body.theme-dark
af 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.