Alt hvad du har brug for at vide om CSS-variabler

Dette er det første kapitel i min nye e-bog (tilgængelig i PDF & Mobi-format).

De fleste programmeringssprog har understøttelse af variabler. Men desværre har CSS fra starten ikke manglet støtte til native variabler.

Du skriver CSS? Derefter ingen variabler for dig. Nå, undtagen hvis du brugte en forarbejdning som Sass.

Forprocessorer som Sass sælger brugen af ​​variabler som en stor tilføjelse. En grund til at prøve dem. Og ved du hvad? Det er en smuk darn god grund.

Nå, internettet bevæger sig hurtigt. Og jeg er glad for at rapportere, at CSS nu endelig understøtter variabler.

Mens preprocessorer understøtter meget flere funktioner, er tilføjelsen af ​​CSS-variabler god. Dette bevæger internettet endnu tættere på fremtiden.

I denne vejledning viser jeg dig, hvordan variabler fungerer naturligt i CSS, og hvordan du kan bruge dem til at gøre dit liv meget lettere.

Hvad du lærer

Jeg vil først lede dig gennem det grundlæggende i CSS-variabler. Jeg mener, at ethvert anstændigt forsøg på at forstå CSS-variabler skal begynde her.

At lære det grundlæggende er cool. Hvad der er endnu køligere er at anvende disse grundlæggende elementer til at oprette apps i den virkelige verden.

Så jeg sammenpakker tingene ved at vise dig, hvordan man bygger 3 projekter, der viser CSS-variabler og deres brugervenlighed. Her er en hurtig forhåndsvisning af disse 3 projekter.

Projekt 1: Oprettelse af komponentvariationer ved hjælp af CSS-variabler

Du bygger muligvis allerede i dag komponentvariationer. Uanset om du bruger React, Angular eller Vue, vil CSS-variabler gøre denne proces enklere.

Oprettelse af komponentvariationer ved hjælp af CSS-variabler

Tjek projektet på Codepen.

Projekt 2: Temaer med CSS-variabler

Du har sandsynligvis se dette et eller andet sted. Jeg viser, hvor nemme CSS-variabler gør det muligt at oprette webstedsdækkende temastilarter.

Tema-stilarter på hele webstedet bruger CSS-variabler

Tjek projektet på Codepen.

Projekt 3: Bygning af CSS Variable Booth

Dette er det sidste projekt. Har ikke noget imod navnet. Jeg kunne ikke komme med et bedre navn.

Farven på kasserne opdateres dynamisk

Bemærk, hvordan farverne på kasserne opdateres dynamisk, og hvordan kassebeholderen roteres i 3D-rum, når rækkeviddeindgangen ændres.

Dette projekt viser, hvor let det er at opdatere CSS-variabler med JavaScript, og de reaktive godbidder, du får med det.

Dette bliver sjovt!

Brug lidt tid på at have det sjovt med det på Codepen.

Bemærk: Artiklen antager, at du har et godt greb om CSS. Hvis du ikke kender CSS meget godt, eller ønsker at lære at oprette kæbedrækkende UI'er, anbefaler jeg at tage mit Advanced CSS-kursus (betalt kursus, der inkluderer 85 lektioner). Denne artikel er et uddrag fra kurset.

Hvorfor variabler er så vigtige

Hvis du er ny med variabler i forbehandlere eller native CSS, er her et par grunde til, at variabler er vigtige.

Årsag 1: Mere læsbar kode

Uden at sige meget, kan du hurtigt fortælle, hvor læsbare og mere vedligeholdelige variabler gør enhver kodebase.

Årsag 2: Nem ændring på tværs af store dokumenter

Hvis du har gemt alle dine konstanter i en separat fil, behøver du ikke at hoppe gennem tusinder af kodelinjer, når du vil foretage en ændring af en variabel.

Det bliver super-let. Bare ændre det ét sted, og voilà.

Årsag nr. 3: Du kan se skrivefejl hurtigere

Det er en smerte at søge gennem linjer med koder, der prøver på at opdage en fejl. Det er endnu mere irriterende, hvis fejlen skyldtes en simpel skrivefejl. De er vanskelige at få øje på. Den gode brug af variabler eliminerer disse besvær.

Med henblik herpå er læsbarhed og vedligeholdelighed de store gevinster.

Takket være CSS-variabler kan vi nu også have disse med indbygget CSS.

Definition af CSS-variabler

Lad mig starte med noget, du muligvis allerede er bekendt med: variabler i JavaScript.

En simpel JavaScript-variabel kan erklæres sådan:

var amAwesome;

og så kan du tildele det en eller anden værdi sådan:

amAwesome = "awesome streng"

I CSS er en CSS-variabel enhver "egenskab", hvis navn begynder med to bindestreger.

/ * kan du se variablen her? * /
.blokér {
 farve: # 8cacea;
- farve: blå
}
CSS-variabler kaldes også “Custom Properties”

Omfang CSS-variabler

Der er endnu en ting at henlede opmærksomheden mod.

Husk, at i JavaScript har variabler et omfang. De kan enten have et globalt eller lokalt omfang.

Det samme kan siges om CSS-variabler.

Overvej eksemplet nedenfor:

: rod {
  - hovedfarve: rød
}

Rootsvælgeren giver dig mulighed for at målrette mod det højeste niveau i DOM eller dokumenttræ.

Så variabler, der er erklæret på denne måde, er slags anvendt til det globale omfang.

Forstået?

Lokale og verdensomspændende scoped variabler

Eksempel 1

Forudsat at du ville oprette en CSS-variabel, der lagrede den primære farve på et temaside.

Hvordan ville du gøre dette?

  1. Du opretter scoped-vælgeren. Brug: root til en 'global' variabel
: rod {
 
}

2. Definer variablen

: rod {
 - primærfarve: rød
}

Husk, at en CSS-variabel er enhver "egenskab", hvis navn begynder med to streger, f.eks. Farve

Det var enkelt.

Brug af CSS-variabler

Når en variabel er blevet defineret og tildelt en værdi, kan du gå videre og bruge den inden for en ejendomsværdi.

Der er dog en smule gotcha.

Hvis du kommer fra en verden af ​​forbehandlere, skal du være vant til at bruge en variabel ved blot at henvise til dens navn. For eksempel:

$ fontstørrelse: 20px

.test {
  font-størrelse: $ font-størrelse
}

Med native CSS-variabler er tingene lidt anderledes. Du refererer til en variabel ved hjælp af funktionen var ().

Med eksemplet ovenfor giver brug af CSS-variabler dette:

: rod {
  - i størrelse: 20px
}

.test {
  font-størrelse: var (- font-size)
}

Helt anderledes.

Husk at bruge var-funktionen

Når du først har fået det ud af vejen, vil du begynde at elske CSS-variabler - meget!

En anden vigtig note er, at i modsætning til variabler i Sass (eller andre forbehandlere) - hvor du kan bruge variablerne mange steder og gøre matematik, som du vil - skal du være forsigtig med CSS-variabler. Du vil oftest få dem indstillet til egenskabsværdier.

/*det er forkert*/
.margin {
- side: margin-top;
var (- side): 20px;
}
Erklæringen smides som en syntaksfejl for at have et ugyldigt ejendomsnavn

Du kan heller ikke gøre matematik. Du har brug for CSS calc () -funktionen til det. Jeg drøfter eksempler, når vi fortsætter.

/*det er forkert */
.margin {
- rum: 20px * 2;
skriftstørrelse: var (- mellemrum); // ikke 40 px
}

Hvis du skal lave matematik, skal du bruge calc () -funktionen sådan:

.margin {
- rum: beregnet (20 px * 2);
skriftstørrelse: var (- mellemrum); / * svarer til 40 px * /
}

Egenskaber, der er værd at nævne

Her er nogle adfærd, der er værd at nævne.

1. Brugerdefinerede egenskaber er almindelige egenskaber, så de kan deklareres på ethvert element.

Angiv dem på et stykkeelement, et afsnit, til side, rod eller endda pseudoelementer. De fungerer som forventet.

De opfører sig som normale egenskaber

2. CSS-variabler løses med de normale arveregler og kaskaderegler

Overvej kodeblokken nedenfor:

div {
  - farve: rød;
}

div.test {
  farve: var (- farve)
}

div.ew {
  farve: var (- farve)
}

Som med normale variabler, arveres farveværdien af ​​diverne.

3. CSS-variabler kan gøres betingede med @media og andre betingede regler

Som med andre egenskaber kan du ændre værdien af ​​en CSS-variabel inden for en @media-blok eller andre betingede regler.

For eksempel ændrer følgende kode værdien af ​​variablen, tagrennen på større enheder.

: rod {
 - tagrend: 10px
}

@media-skærm og (min. bredde: 768px) {
    - tagrend: 30px
}
Nyttig bit til lydhør design

4. CSS-variabler kan bruges i HTML's stilattribut.

Du kan vælge at indstille værdien af ​​dine variabler på linje, og de fungerer stadig som forventet.





krop {
  farve: var (- farve)
}
Indstil variabler inline

CSS-variabler er store og små bogstaver. Vær forsigtig med denne. Jeg sparer mig for stress og skriver variabler i små bogstaver. Din kilometertal kan variere.

/ * dette er to forskellige variabler * /
: rod {
 - farve: blå;
- FARVE: rød;
}

Løsning af flere erklæringer

Som med andre egenskaber løses flere erklæringer med standardkaskaden.

Lad os se et eksempel:

/ * definere variablerne * /
: rod {- farve: blå; }
div {- farve: grøn; }
#alert {- farve: rød; }

/ * Brug variablen * /
* {farve: var (- farve); }

Hvad er farverne på de følgende elementer med de variabelangivelser ovenfor?

Hvad er min farve?

og mig?
  Hvad er min farve også?   

farve?

Kan du finde ud af det?

Første afsnit er blåt. Der er ingen direkte farve-definition angivet på en p-vælger, så den arver værdien fra: root

: rod {- farve: blå; }

Den første div vil være grøn. Det er ret klart. Der er en direkte variabel definition angivet på div

div {- farve: grøn; }

Div med divisions-ID er IKKE grønt. Det vil være rødt

#alert {- farve: rød; }

ID'et har en direkte variabel scoping. Som sådan vil værdien inden for definitionen tilsidesætte de andre. Vælgeren # alert er mere specifik.

Endelig vil p inden i #alerten være… rød

Der er ingen variabel deklaration for afsnitselementet. Du har måske forventet, at farven var blå på grund af erklæringen om: rodelementet.

: rod {- farve: blå; }

Som med andre egenskaber arves CSS-variabler. Værdien nedarves fra forælderen #alert

#alert {- farve: rød; }
Løsningen på quizzen

Løsning af cykliske afhængigheder

En cyklisk afhængighed forekommer på følgende måder:

  1. Når en variabel afhænger af sig selv. Det vil sige, den bruger en var (), der refererer til sig selv.
: rod {
  --m: var (- m)
}

krop {
  margin: var (- m)
}

2. Når to eller flere variabler refererer til hinanden.

: rod {
  - en: beregnet (var (- to) + 10 px);
  - to: beregnet (var (- en) - 10 px);
}

Vær forsigtig med ikke at oprette cykliske afhængigheder i din kode.

Hvad sker der med ugyldige variabler?

Syntaksfejl kasseres, men ugyldige var () -udskiftninger er standard til enten den oprindelige eller nedarvede værdi af den pågældende egenskab.

Overvej følgende:

: root {- farve: 20px; }
p {baggrundsfarve: rød; }
p {baggrund-farve: var (- farve); }

Som forventet er - farve substitueret i var () men egenskabsværdien, baggrundsfarve: 20px er ugyldig efter substitutionen. Da baggrundsfarve ikke er en arvelig egenskab, vil værdien som standard være dens oprindelige værdi af gennemsigtig.

Bemærk, at hvis du havde skrevet baggrundsfarve: 20px uden nogen variabel erstatning, ville den særlige baggrundserklæring have været ugyldig. Den forrige erklæring vil derefter blive brugt.

Sagen er forskellig, når du skriver erklæringen selv

Vær forsigtig, mens du bygger enlige tokens

Når du indstiller værdien af ​​en egenskab som angivet nedenfor, fortolkes 20px som et enkelt token.

skriftstørrelse: 20px

En enkel måde at sige, at værdien 20px ses som en enkelt 'enhed'.

Du skal være forsigtig, når du bygger enkelt tokens med CSS-variabler.

Overvej for eksempel den følgende blok af kode:

: rod {
 - størrelse: 20
}

div {
  font-størrelse: var (- størrelse) px / * WRONG * /
}

Du har måske forventet, at værdien af ​​skriftstørrelse giver 20 px, men det er forkert.

Browseren fortolker dette som 20 px

Bemærk pladsen efter 20

Så hvis du skal oprette enkelte tokens, skal du have en variabel, der repræsenterer hele token. For eksempel - størrelse: 20px, eller brug calc-funktionen f.eks. Calc (var (- størrelse) * 1px) hvor - størrelse er lig med 20

Bare rolig, hvis du ikke får dette endnu. Jeg vil forklare det mere detaljeret i et kommende eksempel.

Lad os bygge ting!

Nu er dette den del af artiklen, vi har ventet på.

Jeg vil lede dig gennem praktiske anvendelser af de koncepter, der diskuteres ved at opbygge et par nyttige projekter.

Lad os komme igang.

Projekt 1: Oprettelse af komponentvariationer ved hjælp af CSS-variabler

Overvej det tilfælde, hvor du har brug for at opbygge to forskellige knapper. Samme basestilarter, bare en smule forskel.

I dette tilfælde er egenskaberne, der er forskellige, baggrundens farve og kantfarve i varianten.

Så hvordan ville du gøre dette?

Her er den typiske løsning.

Opret en baseklasse, siger .btn og tilføj variantklasserne. Her er et eksempel på markering:


.btn ville indeholde basistilerne på knappen. For eksempel:

.btn {
  polstring: 2rem 4rem;
  kant: 2px massiv sort;
  baggrund: gennemsigtig;
  skriftstørrelse: 0,6 em;
  grænseradius: 2px;
}
/ * på hover * /
.btn: hover {
  markør: markør;
  baggrund: sort;
  farve: hvid;
}

Så hvor kommer varianten ind?

Her:

/* variationer */

.btn.red {
  kantfarve: rød
}
.btn.red: hover {
  baggrund: rød
}

Ser du, hvordan vi duplikerer kode her og der? Dette er godt, men vi kunne gøre det bedre med CSS-variabler.

Hvad er det første skridt?

Udskift de forskellige farver med CSS-variabler, og glem ikke at tilføje standardværdier for variablerne!

.btn {
   polstring: 2rem 4rem;
   kant: 2px solid var (- farve, sort);
   baggrund: gennemsigtig;
   skriftstørrelse: 0,6 em;
   grænseradius: 2px;
 }
 / * på hover * /
 .btn: hover {
  markør: markør;
   baggrund: var (- farve, sort);
   farve: hvid;
 }

Når du gør dette: baggrund: var (- farve, sort), du siger, indstil baggrunden til værdien af ​​variablen - farve. Hvis variablen imidlertid ikke findes, skal du bruge standardværdien for sort

Dette er, hvordan du indstiller standardvariabler. Ligesom du gør i JavaScript eller et hvilket som helst andet programmeringssprog.

Her er den gode del.

Med varianterne leverer du bare den nye værdi af CSS-variablen som under:

.btn.red {
   - farve: rød
 }

Det er alt. Når .red-klassen nu bruges, noterer browseren den forskellige - farvevariabelværdi og opdaterer øjeblikkeligt udseendet på knappen.

Dette er virkelig godt, hvis du bruger en masse tid på at bygge genanvendelige komponenter.

Her er en side ved side-sammenligning:

Uden CSS-variabler VS med CSS-variabler

Åh, og hvis du havde flere varianter, har du bare gemt dig selv en masse ekstra indtastning.

Se forskellen ??

Projekt 2: Temasider med CSS-variabler

Jeg er sikker på, at du har fundet dem før. Temasider giver brugeren fornemmelsen af ​​tilpasning. Som om de har kontrol.

Nedenfor er det grundlæggende eksempel, vi bygger.

Så hvor let gør CSS-variablerne dette?

Vi ser på det.

Lige før det ønskede jeg at nævne, at dette eksempel er ganske vigtigt. Med dette eksempel introducerer jeg konceptet med at opdatere CSS-variabler med JavaScript.

Det er sjovt!

Du vil elske det.

Hvad vi virkelig ønsker at gøre.

Det smukke med CSS-variabler er deres reaktive karakter. Så snart de opdateres, opdateres også hvilken egenskab, der har værdien af ​​CSS-variablen.

Konceptuelt er her et billede, der forklarer processen med hensyn til eksemplet.

Processen

Så vi har brug for noget JavaScript til kliklytteren.

I dette enkle eksempel er baggrunden og farven på teksten på hele siden baseret på CSS-variabler.

Når du klikker på en af ​​knapperne ovenfor, indstiller de CSS-variablen til en anden farve. Som et resultat heraf opdateres siden på siden.

Hej, det er alt, hvad der er der til det.

Øh, en ting til.

Når jeg siger, at CSS-variablen er indstillet til en anden værdi, hvordan gøres det?

Indstil variablen inline

CSS-variabler træder i kraft, selvom de er indstillet. Med JavaScript får vi fat i roddokumentet, og vi indstiller den nye værdi for CSS-variablen inline.

Forstået?

Det er meget at tale - lad os gøre det rigtige.

Den første markering

Den første nødvendige markup er denne:

   mørk    rolig    lys
...

Markeringen består af tre knapper i et .theme-overordnede element. For at holde tingene korte har jeg afkortet indholdet i artikelelementet. Inden for denne artikelelement er sidens indhold.

Styling af siden

Succesen med dette projekt begynder med stylingen af ​​siden. Tricket er enkelt.

I stedet for blot at indstille baggrundsfarve og farve på siden i sten, sætter vi dem baseret på variabler.

Her er hvad jeg mener.

krop {
  baggrundsfarve: var (- bg, hvid);
  farve: var (- bg-tekst, sort)
}

Årsagen til dette er slags åbenlyst. Hver gang der klikkes på en knap, ændrer vi værdien af ​​begge variabler i dokumentet.

Efter denne ændring opdateres den samlede stil på siden. Easy-peasy.

Så lad os gå videre og håndtere opdateringen fra JavaScript.

Introduktion til JavaScript

Jeg vil fortsætte med at spytte ud al den JavaScript, der er nødvendig til dette projekt.

const root = document.documentElement
const themeBtns = document.querySelectorAll ('. tema> knap')

themeBtns.forEach ((btn) => {
  btn.addEventListener ('klik', handleThemeUpdate)
})

funktion handleThemeUpdate (e) {
  switch (e.target.value) {
    sag 'mørkt':
      root.style.setProperty ('- bg', 'sort')
      root.style.setProperty ('- bg-tekst', 'hvid')
      pause
    sag 'rolig':
       root.style.setProperty ('- bg', '# B3E5FC')
       root.style.setProperty ('- bg-text', '# 37474F')
      pause
    sag 'let':
      root.style.setProperty ('- bg', 'hvid')
      root.style.setProperty ('- bg-text', 'sort')
      pause
  }
}

Lad ikke det skræmme dig. Det er meget lettere, end du sandsynligvis tror.

Hold først en henvisning til rodelementet, const root = document.documentElement

Rodelementet her er HTML-elementet. Du kan se, hvorfor det er vigtigt på lidt. Hvis du er nysgerrig, er det nødvendigt at indstille de nye værdier for CSS-variablerne.

Hold også en henvisning til knapperne, const themeBtns = document.querySelectorAll ('. Tema> knap')

querySelectorAll giver en matrixlignende datastruktur, som vi kan sløjfe over. Iterér over hver af knapperne, og tilføj en begivenhedslytter til dem ved klik.

Sådan gør du:

themeBtns.forEach ((btn) => {
  btn.addEventListener ('klik', handleThemeUpdate)
})

Hvor er funktionen handleThemeUpdate? Jeg drøfter det næste.

Hver knap, der klikkes, har handleThemeUpdate som dens tilbagekaldsfunktion. Det bliver vigtigt at bemærke, hvilken knap der blev klikket på og derefter udføre den rigtige handling.

I lyset heraf bruges en switch operator, og nogle operationer udføres baseret på værdien af ​​knappen, der klikkes.

Gå videre og kig igen på blokken JavaScript-kode. Du forstår det meget bedre nu.

Projekt 3: Bygning af CSS Variable Booth

I tilfælde af at du gik glip af det, her er det, vi laver:

Husk, at farven på kasserne opdateres dynamisk, og at kassebeholderen drejes i 3d-rum, når rækkeviddeindgangen ændres.

Du kan gå foran og lege med det på Codepen.

Dette er et fremragende eksempel på opdatering af CSS-variabler med JavaScript og den reaktivitet, der følger med den.

Lad os se, hvordan vi bygger dette.

Markup

Her er de nødvendige komponenter.

  1. En række input
  2. En container, der skal indeholde instruktionerne
  3. Et afsnit til at indeholde en liste over andre bokse, der hver indeholder inputfelter

Markeringen viser sig enkel.

Her er det:


  
    
    
  
  
  
    
    
    
    
    
    
     
     Flyt skyderen
     Skriv enhver farve i de røde felter   

Her er et par ting, du skal henlede opmærksomheden mod.

  1. Områdeindgangen repræsenterer værdier fra -50 til 50 med en trinværdi på 5. Værdien af ​​indgangsintervallet er også den mindste værdi, -50
  2. Hvis du ikke er sikker på, hvordan intervalindgangen fungerer, skal du tjekke den ud på w3schools
  3. Bemærk, hvordan sektionen med klasse .farvebokse indeholder andre .farveboksbeholdere. Inden for disse containere findes inputfelter.
  4. Det er måske værd at nævne, at den første input har en standardværdi på rødt.

Når du har forstået strukturen i dokumentet, skal du gå videre og style det sådan:

  1. Fjern .slider- og .instruktionsbeholdere ud af dokumentstrømmen. Placer dem absolut.
  2. Giv kropselementet en solopgang baggrundsfarve og pynt baggrunden med en blomst i nederste venstre hjørne
  3. Placer beholderen til farvebokse i midten
  4. Stil farvebokse-beholderen

Lad os slå dem af.

Følgende vil løse den første opgave.

/ * Skyderen * /
.slider,
.instruktioner {
  position: absolut;
  baggrund: rgba (0,0,0,0,4);
  polstring: 1rem 2rem;
  grænseradius: 5px
}
.slider {
  højre: 10px;
  top: 10px;
}
.slider> * {
  display: blokering;
}


/ * Instruktioner * /
.instruktioner {
  tekstjustering: center;
  bund: 0;
  baggrund: initial;
  farve: sort;
}

Kodestykket er ikke så komplekst, som du tror. Jeg håber du kan læse igennem og forstå det. Hvis ikke, slip en kommentar eller tweet.

Styling af kroppen er lidt mere involveret. Forhåbentlig forstår du CSS godt.

Da vi stræber efter at style elementet med en baggrundsfarve og et baggrundsbillede, er det måske det bedste alternativ at bruge egenskaben baggrundskort til at indstille flere baggrunde.

Her er det:

krop {
  margen: 0;
  farve: rgba (255,255,255,0,9);
  baggrund: url ('http://bit.ly/2FiPrRA') 0 100% / 340px ingen gentagelse, var (- primærfarve);
  font-familie: 'Shadows Into Light Two', kursiv;
}

Url-bit er linket til solopgangblomsten.

Det næste sæt egenskaber 0 100% repræsenterer billedets baggrundsposition.

Her er en illustration af, hvordan CSS-baggrundspositionering fungerer:

Fra: den avancerede guide til CSSFra: den avancerede guide til CSS

Den anden bit efter skråstreg repræsenterer baggrundsstørrelsen Dette er indstillet til 340px Hvis du gjorde dette mindre, ville billedet også være mindre.

nej-gentagelse, du kan måske finde ud af, hvad det gør. Det forhindrer, at baggrunden gentager sig selv.

Endelig er alt, hvad der kommer efter komma, en anden baggrundserklæring. Denne gang har vi kun indstillet baggrundsfarve til var (primærfarve)

Ups, det er en variabel.

Implikationen af ​​dette er, at du skal definere variablen. Sådan gør du:

: rod {
  - primærfarve: rgba (241.196,15, 1)
}

Den primære farve der er den solopgang gule farve. Ikke noget særligt. Vi vil snart indstille nogle flere variabler derinde.

Lad os nu centrere farvebokse

main.booth {
  min. højde: 100vh;
  
  display: flex;
  justify-content: center;
  align-items: center;
}

Hovedcontaineren fungerer som en flexcontainer og placerer det direkte barn med rette i midten af ​​siden. Dette er vores elskede farveboksbeholder

Lad os gøre farvebokse-beholderen og dens børnelementer smukke.

Først barnets elementer:

.farveboks {
  polstring: 1rem 3,5rem;
  margin-bund: 0,5rem;
  kant: 1px fast rgba (255,255,255,0,2);
  grænseradius: 0,3rem;
  kasseskygge: 10px 10px 30px rgba (0,0,0,0,4);
}

Det vil gøre det. Der er også tilføjet en smuk skygge. Det får os nogle seje effekter.

Det er ikke alt. Lad os style den samlede container-bokse-container:

/ * Farvebokse * /
.farvebokse {
  baggrund: var (- sekundærfarve);
  kasseskygge: 10px 10px 30px rgba (0,0,0,0,4);
  grænseradius: 0,3rem;
  
  transform: perspektiv (500 px) rotereY (beregnet (var (- skyderen) * 1deg));
  overgang: transform 0,3s
}

Åh min!

Der er meget derinde.

Lad mig nedbryde det.

Her er den enkle bit:

.farvebokse {
   baggrund: var (- sekundærfarve);
   kasseskygge: 10px 10px 30px rgba (0,0,0,0,4);
   grænseradius: 0,3rem;
}

Ved du hvad det gør, ikke?

Der er en ny variabel derinde. Det skal tages ved at føje det til rodvælgeren.

: rod {
  - primærfarve: rgba (241,196,15, 1);
  - sekundær-farve: rød;
}

Den sekundære farve er rød. Dette giver beholderen en rød baggrund.

Nu til den del, der sandsynligvis forvirrede dig:

/ * Farvebokse * /
.farvebokse {
  transform: perspektiv (500 px) rotereY (beregnet (var (- skyderen) * 1deg));
  overgang: transform 0,3s
}

Et øjeblik kunne vi forenkle værdien af ​​den transformerede egenskab ovenfor.

For eksempel:

transform: perspektiv (500px) rotationY (30deg);

Transformationskortanden anvender to forskellige funktioner. Den ene, perspektivet og den anden, rotationen langs Y-aksen.

Hmmm, så hvad er der med perspektivet og roterende Y-funktionerne?

Funktionen perspektiv () anvendes til et element, der transformeres i 3D-rum. Det aktiverer det tredimensionelle rum og giver elementet dybde langs z-aksen.

Du kan læse mere om perspektivfunktionen på codrops.

RotateY-funktionen, hvad er der med den?

Efter aktivering af 3d-rummet har elementet planetene x, y, z. Funktionen rotateY roterer elementet langs Y-planet.

Følgende diagram fra codrops er virkelig nyttigt til visualisering af dette.

Codrops

Jeg håber, at der blæste noget af dampen.

Tilbage til hvor vi startede.

Når du flytter skyderen, ved du, hvilken funktion der påvirker rotationen af ​​.container-boksen?

Det er den roterende funktion, der påberåbes. Kassen drejes langs Y-aksen.

Da værdien, der er overført til rotateY-funktionen, opdateres via JavaScript, repræsenteres værdien med en variabel.

Så hvorfor multiplicere med variablen med 1deg?

Som en generel tommelfingerregel og for eksplicit frihed tilrådes det, at når du bygger en enkelt tokens, gemmer du værdier i dine variabler uden enheder.

Du kan konvertere dem til enhver enhed, du ønsker, ved at udføre en multiplikation via calc-funktionen.

Dette giver dig mulighed for at gøre 'hvad du vil' med disse værdier, når du har dem. Vil du konvertere til deg eller som et forhold mellem brugerens viewport vw, kan du hvad du vil.

I dette tilfælde konverterer vi tallet til at have en grad ved at multiplicere "tallet" værdien med 1deg

Da CSS ikke forstår matematik, skal du videregive denne aritmetik til calc-funktionen for at blive korrekt evalueret af CSS.

Når det er gjort, er vi gode til at gå. Værdien af ​​denne variabel kan opdateres i JavaScript, så meget vi kan.

Nu er der kun én bit CSS tilbage.

Her er det:

/ * Håndter farver for hver farveboks * /
.farveboks: nth-child (1) {
  baggrund: var (- bg-1)
}
.farveboks: nth-barn (2) {
  baggrund: var (- bg-2)
}
.farveboks: nth-barn (3) {
  baggrund: var (- bg-3)
}
.farveboks: nth-barn (4) {
  baggrund: var (- bg-4)
}
.farveboks: nth-barn (5) {
  baggrund: var (- bg-5)
}
.farveboks: nth-barn (6) {
  baggrund: var (- bg-6)
}

Så hvad er dette voodoo?

Først og fremmest vælger nth-child-vælgeren hver af børneboksene.

Der er brug for lidt fremsyn her. Vi ved, at vi vil opdatere baggrundsfarven på hver boks. Vi ved også, at denne baggrundsfarve skal repræsenteres af en variabel, så den er tilgængelig via JavaScript. Ret?

Vi kunne gå foran og gøre dette:

.farveboks: nth-child (1) {
  baggrund: var (- bg-1)
}

Let.

Der er dog et problem. Hvis denne variabel ikke er til stede, hvad sker der så?

Vi har brug for et tilbageslag.

Dette fungerer:

.farveboks: nth-child (1) {
  baggrund: var (- bg-1, rød)
}

I dette særlige tilfælde har jeg valgt IKKE at give nogen tilbageleveringer.

Hvis en variabel, der bruges inden for en ejendomsværdi, er ugyldig, vil egenskaben påtage sig dens oprindelige værdi.

Når --bg-1 er ugyldig eller IKKE tilgængelig, vil baggrunden som standard være dens oprindelige værdi af gennemsigtig.

Startværdier henviser til en egenskabs værdier, når de ikke eksplicit er indstillet. Hvis du for eksempel ikke indstiller baggrundsfarven på et element, vil det som standard være gennemsigtigt

Startværdier er slags standardegenskabsværdier.

Lad os skrive noget JavaScript

Vi har meget lidt at gøre på JavaScript-siden af ​​tingene.

Lad os først håndtere skyderen.

Vi har bare brug for 5 linjer til det!

const root = document.documentElement
const range = document.querySelector ('. stand-skyderen')

// Gør noget, når gliderintervalets værdi ændres
range.addEventListener ('input', handleSlider)

funktionshåndtagSlider (e) {
  lad værdi = e.target.value
  root.style.setProperty ('- skyderen', værdi)
}

Det var let, ikke?

Lad mig forklare, hvis jeg mistede dig.

Hold først en henvisning til skyderelementet, const range = document.querySelector ('. Stand-skyderen')

Opsæt en begivenhedslytter til, når værdien af ​​intervalindgangen ændres, rækkevidde.addEventListener ('input', handleSlider)

Skriv tilbagekaldet, håndtagSlider

funktionshåndtagSlider (e) {
  lad værdi = e.target.value
  root.style.setProperty ('- skyderen', værdi)
}

root.style.setProperty ('- skyderen', værdi) siger, hent rodelementet (HTML), tag fat i dets stil og sæt en egenskab på det.

Håndtering af farveændringer

Dette er lige så let som at håndtere gliderens værdiændring.

Sådan gør du:

const input = document.querySelectorAll ('. farveboks> input')
// som værdien i input ændres, gør noget.
input.forEach (input => {
  input.addEventListener ('input', handleInputChange)
})

funktionshåndtagInputChange (e) {
  lad værdi = e.target.value
  lad inputId = e.target.parentNode.id
  lad inputBg = `--bg - $ {inputId}`
  root.style.setProperty (inputBg, værdi)
}

Behold en henvisning til alle tekstindgange, const input = document.querySelectorAll ('. Farveboks> input')

Opsæt en begivenhedslytter på alle input:

input.forEach (input => {
   input.addEventListener ('input', handleInputChange)
})

Skriv håndtagetInputændringsfunktion:

funktionshåndtagInputChange (e) {
  lad værdi = e.target.value
  lad inputId = e.target.parentNode.id
  lad inputBg = `--bg - $ {inputId}`
  root.style.setProperty (inputBg, værdi)
}

Pyha ...

Det er det!

Projektet er færdig.

Hvordan gik jeg glip af dette?

Jeg havde afsluttet og redigeret det første udkast til denne artikel, da jeg bemærkede, at jeg ikke nævnte browserstøtte overalt. Så lad mig ordne mit rod.

Browserstøtte til CSS-variabler (aka tilpassede egenskaber) er slet ikke dårligt. Det er temmelig godt med anstændig support på tværs af alle moderne browsere (over 87% på dette tidspunkt).

kan jeg bruge

Så kan du bruge CSS-variabler i produktionen i dag? Jeg siger ja! Sørg dog for at kontrollere, hvad adoptionstakten er for dig selv.

På den lyse side kan du bruge en forbehandler som Myth. Det forarbejder din 'fremtidige' CSS til noget, du bruger i dag. Hvor sej, hej?

Hvis du har nogle erfaringer med at bruge postCSS, er det lige så en god måde at bruge fremtidig CSS i dag. Her er et postCSS-modul til CSS-variabler.

Det er det. Jeg er færdig her.

Ups, men jeg har spørgsmål!

Hent e-bog til offline læsning, og få også en privat slap invitation, hvor du kan spørge mig hvad som helst.

Det er en retfærdig aftale, ikke?

Ses senere!