Vil du lære CSS-variabler? Her er min gratis 8-delt kursus!

Foto af Mikael Kristenson på Unsplash

CSS-variabler er en spændende ny teknologi til moderne browsere. Det bringer variablenes kraft til CSS, hvilket resulterer i mindre gentagelse, bedre læsbarhed og mere fleksibilitet.

For at hjælpe dig med at komme i gang har jeg oprettet et gratis kursus om CSS-variabler hos Scrimba.

Dette er en fortsættelse af vores serie med gratis CSS-kurser. Tidligere har vi lanceret kurser om CSS Grid og Flexbox. Kombineret har de fået godt over 20 000 tilmeldinger.

Kursets struktur

Kurset indeholder 8 interaktive screencasts. De er alle mellem 3 og 6 minutter, da mit mål er at lære dig CSS-variabler så hurtigt som muligt. I slutningen af ​​nogle af dem vil jeg give dig en udfordring og opfordre dig til at lege med koden interaktivt. Dette kan gøres direkte i browseren, da Scrimba-skærmbilleder gør dette muligt.

I løbet af kurset arbejder vi med et meget simpelt porteføljewebsted, da det giver os muligheden for at fremhæve de vigtigste anvendelsessager for CSS-variabler.

Lad os se på hver af lektionerne.

Lektion 1: Hvorfor lære CSS-variabler

I den allerførste screencast vil jeg tale om, hvorfor du skal lære CSS-variabler. Jeg vil drøfte de generelle fordele såvel som dens fordele i forhold til SASS- og LESS-variabler.

Lektion 2: Din første CSS-variabel

Så hopper vi direkte ind i koden. Jeg vil først vise dig, hvordan du opretter en CSS-variabel, og derefter beder dig om at gøre det samme. Det er vigtigt, at du faktisk koder og ikke bare ser skærmbillederne, da det gør viden til at blive bedre.

: rod {
  --red: # ff6f69;
}
krop {
  farve: var (- rød);
}

Lektion 3: Oversvømmende variabler

Vi fortsætter med at tilsidesætte, et sejt koncept, der er muligt, da CSS-variabler har adgang til DOM og nedarves i hierarkiet. Dette adskiller dem tydeligt fra SASS- og LESS-variabler, der fungerer mere som konstanter end variabler, når de rammer browseren og ikke har nogen viden om DOM.

Lektion 4: Lokale variabler

Lokale variabler er variabler, der kun er tilgængelige i et bestemt omfang, for eksempel inden for overskriften eller sidefeltet i din app. Hvis du prøver at få adgang til det fra et andet omfang, defineres det ikke.

Lektion 5: Temning med CSS-variabler

Temaer er en af ​​de største fordele ved CSS-variabler. Efter temaer taler jeg ikke kun om fulde webstedstemaer, men også komponentspecifikke temaer, som er en mere normal brugssag (f.eks. Visuelt ændre et element til featured så det skiller sig ud fra mængden).

Her bruger vi temaer til at få et af vores poster i gitteret til at skille sig ud fra de andre.

Lektion 6: Ændring af variabler med JavaScript

Du kan også ændre CSS-variabler med JavaScript, hvilket er meget nyttigt. Dette åbner muligheden for at give dine brugere mulighed for at ændre dine variabler. Igen noget der ikke er muligt med LESS og SASS variabler. Et meget relevant eksempel på dette er at give brugerne mulighed for at justere den samlede skriftstørrelse på dit websted. Dette vil gøre det mere tilgængeligt for mennesker med dårligt syn.

Lektion 7: Responsivitet med CSS-variabler

I betragtning af at CSS-variabler har adgang til DOM, kan de også ændres baseret på skærmstørrelse. Dette er faktisk bare et eksempel på tilsidesættelse, men jeg synes, det fortjener en helt ny screencast, da lydhørhed er temmelig kerne i disse dage. Alt, der gør lydhørheden lettere, bør bruges af front-end udviklere.

Lektion 8: CSS-variabler og arv

Selvom jeg taler om arv gennem hele kurset, afslutter vi kurset med et par ekstra bemærkninger om det, da der er et par brugstilfælde, som du måske forestiller dig værker, men som ikke gør det.

Og det er det. Når du går gennem disse hurtige screencasts, har du en solid forståelse af CSS-variabler. At se dem vil tage dig mindre end 30 minutter, og du kan også justere replayhastigheden for at gøre det endnu hurtigere.

Med andre ord: dette kursus er sandsynligvis den hurtigste måde at lære CSS-variabler korrekt på.

Udfordringerne kan naturligvis få det til at tage lidt mere tid, men de er frivillige. Du vælger, hvor interaktivt du ønsker, at dette kursus skal være.

Scrimba-formatet

Kurset er bygget ved hjælp af Scrimba, et interaktivt kodning screencast-værktøj, som jeg er medstifter af, sammen med Magnus og Sindre.

Som jeg har nævnt før, er den unikke ting med Scrimba, at skærmbillederne er fuldt interaktive, hvilket betyder, at du kan redigere koden inde i casts.

Her er en gif, der forklarer konceptet:

Pause screencast → Rediger koden → Kør den! → Se dine ændringer

Dette er godt, når du føler, at du er nødt til at eksperimentere med koden for korrekt at forstå den, eller når du blot ønsker at kopiere et stykke af koden.

Scrimba-skærmbilleder vejer også 1% af videoer i filstørrelse, hvilket betyder, at det er meget lettere at se, selv når din internetforbindelse er langsom.

Så tjek kurset i dag, og glad kodning :)

Tak for at have læst! Mit navn er Per, jeg er medstifter af Scrimba, og jeg elsker at hjælpe folk med at lære nye færdigheder. Følg mig på Twitter, hvis du vil have besked om nye artikler og ressourcer.