Lær CSS-variabler på 5 minutter - En tutorial til begyndere

CSS Custom Properties (også kendt som variabler) er en stor gevinst for front-end-udviklere. Det bringer styrken af ​​variabler til CSS, hvilket resulterer i mindre gentagelse, bedre læsbarhed og mere fleksibilitet.

Plus, i modsætning til variabler fra CSS-forprocessorer, er CSS-variabler faktisk en del af DOM, som har mange fordele. Så de er i det væsentlige som SASS- og MINDRE variabler på steroider. I denne artikel giver jeg dig et nedbrudskursus om, hvordan denne nye teknologi fungerer.

Jeg har også oprettet et gratis og interaktivt 8-delt kursus om CSS-variabler, så tjek det, hvis du vil blive ekspert på dette emne.

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

Hvorfor lære CSS-variabler?

Der er mange grunde til at bruge variabler i CSS. En af de mest overbevisende er, at det reducerer gentagelse i dit typografiark.

I eksemplet ovenfor er det meget bedre at oprette en variabel til #ffeeadfarven end at gentage den som vi laver her:

Dette gør ikke kun din kode lettere at læse, men det giver dig også mere fleksibilitet, hvis du vil ændre denne farve.

Nu har dette faktisk været muligt med SASS- og LESS-variabler i årevis. Der er dog et par store fordele med CSS-variabler.

  1. De kræver ikke nogen transpilering for at arbejde, da de er hjemmehørende i browseren. Så du har ikke brug for nogen opsætning for at komme i gang, som du gør med SASS og LESS.
  2. De bor i DOM, som åbner masser af fordele, som jeg vil gennemgå i denne artikel og i mit kommende kursus.

Lad os nu komme i gang med at lære CSS-variabler!

Erklærer din første CSS-variabel

For at erklære en variabel skal du først beslutte, hvilket omfang variablen skal leve i. Hvis du vil have, at den skal være tilgængelig globalt, skal du blot definere den på :rootpseudoklassen. Det matcher rodelementet i dit dokumenttræ (normalt tagget).

Da variabler arves, vil dette gøre din variabel tilgængelig i hele din applikation, da alle dine DOM-elementer er efterkommere af tagget.

:root { --main-color: #ff6f69; } 

Som du kan se, erklærer du en variabel på samme måde som du ville indstille enhver CSS-ejendom. Variablen skal dog starte med to bindestreger.

For at få adgang til en variabel skal du bruge var()funktionen og give navnet på variablen som parameter.

#title { color: var(--main-color); } 

Og det giver din titel #f6f69farven:

Erklæring om en lokal variabel

Du kan også oprette lokale variabler, som kun er tilgængelige for det element, det erklæres for, og for dets børn. Dette er fornuftigt at gøre, hvis du ved, at en variabel kun vil blive brugt i en bestemt del (eller dele) af din app.

For eksempel har du muligvis en advarselsboks, der bruger en særlig slags farve, som ikke bruges andre steder i appen. I så fald kan det være fornuftigt at undgå at placere det i det globale omfang:

.alert { --alert-color: #ff6f69; } 

Denne variabel kan nu bruges af sine børn:

.alert p { color: var(--alert-color); border: 1px solid var(--alert-color); } 

Hvis du forsøgte at bruge alert-colorvariablen et andet sted i din applikation, for eksempel i navlinjen, ville den simpelthen ikke fungere. Browseren ville bare ignorere den linje af CSS.

Lettere respons med variabler

En stor fordel ved CSS-variabler er, at de har adgang til DOM. Dette er ikke tilfældet med LESS eller SASS, da deres variabler er samlet ned til almindelig CSS.

I praksis betyder det, at du for eksempel kan ændre variablerne baseret på skærmens bredde:

:root { --main-font-size: 16px; } media all and (max-width: 600px) { :root { --main-font-size: 12px; } } 

Og med de enkle fire linier med kode har du opdateret hoved skriftstørrelsen på tværs af hele din app, når den ses på små skærme. Temmelig elegant, ikke?

Sådan får du adgang til variabler med JavaScript

En anden fordel ved at bo i DOM er, at du kan få adgang til variablerne med JavaScript og endda opdatere dem for eksempel baseret på brugerinteraktioner. Dette er perfekt, hvis du vil give dine brugere muligheden for at ændre dit websted (såsom justering af skriftstørrelse).

Lad os fortsætte med eksemplet fra begyndelsen af ​​denne artikel. At gribe en CSS-variabel i JavaScript tager tre linjer kode.

var root = document.querySelector(':root'); var rootStyles = getComputedStyle(root); var mainColor = rootStyles.getPropertyValue('--main-color'); console.log(mainColor); \--> '#ffeead' 

For at opdatere CSS-variablen skal du blot kalde setPropertymetoden på det element, hvori variablerne er deklareret, og videregive i variabelnavnet som den første parameter og den nye værdi som den anden.

root.style.setProperty('--main-color', '#88d8b0') 

Denne hovedfarve kan ændre hele din apps udseende, så den er perfekt til at give brugerne mulighed for at indstille temaet på dit websted.

Ved at opdatere en enkelt variabel kan du ændre farven på navlinjen, teksten og elementerne.

Ved at opdatere en enkelt variabel kan du ændre farven på navlinjen, teksten og elementerne.

Browsersupport

I øjeblikket understøtter 77 procent af den globale websitetrafik CSS-variabler, med næsten 90 procent i USA. Vi bruger allerede CSS-variabler på Scrimba.com i et stykke tid nu, da vores publikum er ret teknologisk kloge og for det meste bruger moderne browsere.

Ok, det var det. Jeg håber, du har lært noget!

Hvis du vil lære det ordentligt, skal du sørge for at tjekke mit gratis CSS Variables-kursus 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.