Forklarede CSS-præprocessorer

CSS Preprocessors bliver i stigende grad en grundpiller i workflowet til frontend webudviklere. CSS er et utroligt kompliceret og nuanceret sprog, og i et forsøg på at gøre det lettere at bruge, henvender udviklere sig ofte til at bruge præprocessorer som SASS eller LESS.

CSS Preprocessors kompilerer den kode, der er skrevet ved hjælp af en speciel compiler. De bruger derefter det til at oprette en CSS-fil, som derefter kan henvises til af det vigtigste HTML-dokument.

Når du bruger en hvilken som helst CSS-forprocessor, kan du programmere i normal CSS, som du ville gjort, hvis forprocessoren ikke var på plads. Det gode er, at du også har flere muligheder til rådighed for dig. Nogle, som f.eks. SASS, har specifikke stilstandarder, som det er meningen at gøre dokumentets skrivning endnu lettere, såsom friheden til at udelade seler, hvis du vil.

Selvfølgelig tilbyder CSS Preprocessors også andre funktioner. Mange af de tilbudte funktioner er utroligt ens på tværs af præprocessorer, med kun små afvigelser i syntaksen. Således kan du vælge stort set enhver, du ønsker, og du vil være i stand til at opnå de samme ting. Nogle af de mere nyttige funktioner er:

Variabler

Et af de mest anvendte emner i ethvert programmeringssprog er variablen, noget som CSS især mangler. Ved at have variabler til din rådighed kan du definere en værdi en gang og genbruge den i hele programmet. Et eksempel på dette i SASS ville være:

$yourcolor: #000056 .yourDiv { color: $yourcolor; }

Ved at erklære SASS yourcolorvariablen en gang er det nu muligt at genbruge den samme nøjagtige farve i hele dokumentet uden nogensinde at skulle indtaste definitionen igen.

Sløjfer

Et andet almindeligt emne på sprog er sløjfer, noget andet CSS mangler. Sløjfer kan bruges til at gentage de samme instruktioner flere gange uden at skulle genindlæses flere gange. Et eksempel med SASS ville være:

@for $vfoo 35px to 85px { .margin-#{vfoo} { margin: $vfoo 10px; } }

Denne sløjfe sparer os for at skulle skrive den samme kode flere gange for at ændre marginstørrelsen.

Hvis / andet udsagn

Endnu en anden funktion, som CSS mangler, er If / Else-udsagn. Disse kører kun et sæt instruktioner, hvis en given betingelse er sand. Et eksempel på dette i SASS ville være:

@if width(body) > 500px { background color: blue; } else { background color: white; }

Her ændrer baggrundsfarven farve afhængigt af bredden på sidens krop.

Dette er kun nogle få af de vigtigste funktioner i CSS Preprocessors. Som du kan se, er CSS Preprocessors utroligt nyttige og alsidige værktøjer. Mange webudviklere bruger dem, og det anbefales stærkt at lære mindst en af ​​dem.

Mere information:

  • De bedste CSS-tutorials
  • SASS docs: //sass-lang.com/
  • SASS, en forprocessor til dit webgarnering
  • MINDRE dokumenter: //lesscss.org/
  • Stylus docs: //stylus-lang.com/