Sådan oprettes let temaer med CSS-variabler

En af de bedste anvendelsessager til CSS-variabler er oprettelse af tema. Og med det mener jeg ikke kun at ændre temaer for hele din app, da det sandsynligvis ikke er noget, du skal gøre meget ofte. Hvad der er mere relevant er evnen til nemt at oprette komponentspecifikke temaer.

Dette kan f.eks. Være, når du skal markere et e-handelsprodukt som føjet til indkøbskurven. Eller måske har dit websted en admin-sektion, der indeholder en mørkere sidebar-sektion.

CSS-variabler giver dig mulighed for at gøre dette på en enklere og mere fleksibel måde, end det tidligere var muligt. I denne artikel forklarer jeg nøjagtigt hvordan.

Jeg har også oprettet en screencast om temaoprettelse i mit gratis 8-delede CSS Variables-kursus. Hvis du er interesseret i at lære mere om kurset, skal du tjekke denne artikel.

Opsætningen

Vi arbejder med et porteføljeside som et eksempel. Vores mål er at kunne præsentere et af projekterne i vores portefølje, så det skiller sig ud fra resten af ​​mængden. Teknisk set gør vi dette ved at tilføje en klasse til det specifikke element, vi vil have.

Sådan ser porteføljesiden oprindeligt ud:

Jeg gider ikke tale om HTML til webstedet, da det er ret ligetil, og jeg antager, at du kender HTML. Men hvis du er interesseret i at rode rundt med koden, har jeg oprettet en Scrimba-legeplads til den her.

Lad os nu hoppe direkte ind i CSS. Her er vores stilark, før vi er begyndt at bruge CSS-variabler:

html, body { background: #ffeead; color: #ff6f69; } h1, p { color: #ff6f69; } #navbar a { color: #ff6f69; } .item { background: #ffcc5c; } button { background: #ff6f69; color: #ffcc5c; } 

Som du kan se, er vi kun bruger tre farver her: #ffeead, #ff9f96og #ffcc5c. Vi genbruger dem dog meget. Så dette er en perfekt brugssag til CSS-variabler.

For at begynde at bruge det skal vi først erklære vores variabler. Vi gør det i :rootpseudoklassen:

:root { --red: #ff6f69; --beige: #ffeead; --yellow: #ffcc5c; } 

Derefter bytter vi blot vores hexadecimale værdier ud med variablerne:

html, body { background: var(--beige); color: var(--red); } h1, p { color: var(--red); } #navbar a { color: var(--red); } .item { background: var(--yellow); } button { background: var(--red); color: var(--yellow); } 

Nu har vi styrken af ​​variabler i vores CSS, hvilket betyder, at vi simpelthen kan ændre det --redtil noget andet, og det opdateres på hele vores side.

Hvis du kæmper for at forstå, hvad der foregår her, skal du tjekke min artikel om at lære CSS-variabler om 5 minutter eller tilmelde dig kurset.

Oprettelse af et tema

Lad os nu oprette temaet. Vi ønsker muligheden for at føje en .featuredklasse til et af vores fire projektemner og derved få dette emne til at skille sig ud fra resten. Specifikt skifter vi rød til #ff5564og gul #ffe55b.

Sådan ser det ud i markeringen:

project d

learn more

Denne ændring skal påvirke stylingen fire forskellige steder:

  • baggrundsfarve på
  • farve på

  • baggrundsfarve på
  • farve på

Den gamle måde

Den måde, vi tidligere skulle løse dette på, var ved at oprette en brugerdefineret CSS-vælger til hvert element inde i .featuredelementet, sådan:

.featured { background: #ffe55b; } .featured > h1 { color: #ff5564; } .featured > button { background: #ff5564; color: #ffe55b; } 

Denne tilgang er ikke særlig fleksibel. Hvis du tilføjede et andet element i dine porteføljeposter, skulle du også skrive specifikke vælgere til dem.

Den nye måde

Med CSS-variabler bliver det dog meget lettere. Vi tilsidesætter blot variablerne inde i .featureden klasse som denne:

.featured { --yellow: #ffe55b; --red: #ff5564; } 

Da CSS-variabler er arvet, .featuredrefererer alle de elementer, inden for hvilke der refereres til --redeller --yellownu, de lokale værdier og ikke de globale. Så den eller

elementer bruger automatisk de lokale værdier til variablerne.

Sådan spiller det ud på siden.

Som du kan se, ser projektet 'projekt d' lidt anderledes ud end resten.

Som du kan se, ser projektet 'projekt d' lidt anderledes ud end resten.

Pænt, eller hvad?

Tænk bare på, hvordan dette ville være, hvis vi byggede en mere kompleks komponent, for eksempel et produkt i en e-handelsapp. Det kan omfatte titler, undertitler, afsnit, billeder, billedtekster, knapper, ratings og meget mere. Det er meget nemmere og mere fleksibelt at blot vende værdien af ​​nogle variabler i stedet for at oprette brugerdefinerede vælgere til hver af efterkommerne.

Hvis du er interesseret i at lære mere om denne teknologi, skal du tjekke mit gratis 8-delede interaktive CSS-variabelkursus på Scrimba.

Tak for læsningen! Mit navn er Per Borgen, jeg er medstifter af Scrimba - den nemmeste måde at lære at kode på. Du bør tjekke vores responsive webdesign bootcamp, hvis du vil lære at opbygge et moderne websted på et professionelt niveau.