Lær CSS-variabler på 5 minutter

En hurtig tutorial om, hvordan man kommer i gang.

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

Plus, i modsætning til variabler fra CSS-forarbejdere, 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 vil jeg give dit et crashkursus om, hvordan denne nye teknologi fungerer.

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

Hvorfor lære CSS-variabler?

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

I eksemplet ovenfor er det meget bedre at oprette en variabel til #ffeead-farven end at gentage den, som vi gør her:

Dette vil ikke kun gøre din kode lettere at læse, men den giver dig også større fleksibilitet, hvis du ønsker at æ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 transpilering for at arbejde, da de er hjemmehørende i browseren. Så du behøver ikke nogen opsætning for at komme i gang, som du gør med SASS og MINDRE.
  2. De bor i DOM, som åbner et væld af fordele, som jeg vil gennemgå i denne artikel og i mit kommende kursus.

Lad os nu begynde at lære CSS-variabler!

Erklæring af din første CSS-variabel

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

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

: rod {
  - hovedfarve: # ff6f69;
}

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

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

#title {
  farve: var (- hovedfarve);
}

Og det giver din titel # f6f69-farven:

Erklæring af en lokal variabel

Du kan også oprette lokale variabler, som kun er tilgængelige for det element, det er erklæret ved og for dets børn. Dette giver mening 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 alarmboks, der bruger en speciel slags farve, som ikke bruges andre steder i appen. I dette tilfælde kan det være fornuftigt at undgå at placere det i det globale omfang:

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

Denne variabel kan nu bruges af dens børn:

.alert p {
  farve: var (- alarmfarve);
  kant: 1px solid var (- alarmfarve);
}

Hvis du prøvede at bruge alarmfarvevariablen et andet sted i din applikation, for eksempel i navbaren, ville det simpelthen ikke fungere. Browseren ville bare ignorere den linje af CSS.

Nemmere lydhørhed med variabler

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

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

: rod {
  -main-font-størrelse: 16px;
}
medier alle og (maks. bredde: 600 px) {
  : rod {
    -main-font-størrelse: 12px;
  }
}

Og med disse enkle fire kodelinjer har du opdateret hovedstørrelsesstørrelsen på tværs af hele appen, 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å brugte interaktioner. Dette er perfekt, hvis du vil give dine brugere muligheden for at ændre dit websted (f.eks. Justering af skrifttypestørrelse).

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

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

For at opdatere CSS-variablen skal du blot kalde setProperty-metoden på det element, hvori variablerne er blevet erklæret og give variabelnavnet som den første parameter og den nye værdi som den anden.

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

Denne hovedfarve kan ændre hele appens udseende, så det 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å navbaren, teksten og elementerne.

Browserstøtte

I øjeblikket understøtter 77 procent af den globale websitetstrafik 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 temmelig teknisk kyndige og mest bruger moderne browsere.

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

Hvis du vil lære det ordentligt, skal du huske at tjekke mit gratis CSS-variabelskurs hos Scrimba.

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.