Fordele ved at bruge en forprocessor (Sass) i CSS-udvikling

“Program script digital tapet” af Maik Jonietz på Unsplash

Der er mange argumenter på nettet, om brug af en CSS-forprocessor er nyttig i udvikling eller ej. Min personlige mening er, at du muligvis ikke har brug for en forbehandler til små webprojekter eller applikationer.

Imidlertid bliver vedligeholdelse & læsbarhed af CSS-kode sværere, efterhånden som projektet bliver større. At håndtere tusindvis af linjer med CSS-regler, spilder udviklere tid og hæve omkostningerne ved projektet. Efterhånden som projektet bliver større, forårsager CSS nogle problemer som:

  • Stor indsats for små ændringer
  • Problemer med strukturering af koden
  • Kode redundans
  • Uendelige linjer med CSS klasser og regler

En forbehandler hjælper os med at tackle disse problemer. Det har nogle fordele frem for almindelig CSS. Før vi dykker dybere, skal du først forklare, hvad en CSS-forarbejdning er ...

Hvad er en CSS-forprocessor?

Et program / værktøj, der har sin egen syntaks, som senere kompileres i standard CSS-kode.

En forbehandler har sin egen syntaks for udviklere til at skrive lettere og renere CSS-kode. Senere oversættes det i en separat fil til standard CSS, fordi browsere ikke forstår syntaks.

Der er forskellige forbehandlere som Sass, Less og Stylus. I denne artikel vil jeg forklare nogle fordele ved Sass.

Hvad er Sass?

Reference: Sass officielle hjemmeside

Sass er en af ​​de mest anvendte CSS-forprocessorer. Det har forskellige funktioner til at hjælpe udviklere med at skrive en bedre og renere CSS-kode. Du kan tjekke for flere detaljer fra Sass officielle websted og Github-opbevaring.

FAQ: Sass vs SCSS

Dette er et ofte stillede spørgsmål. De er faktisk begge Sass med en anden syntaks. SCSS er dybest set en nyere version, Sass version 3.

Eksempel på Sass-syntaks:

$ farve: grå
= Min-skrifttype ($ farve)
  font-familie: Arial, Helvetica, sans-serif
  skriftstørrelse: 16px
  farve: $ farve
legeme
  baggrund: $ farve
  margin: 0
  + Min-skrifttype (hvid)

Eksempel på SCSS-syntaks:

$ farve: grå;
@mixin my-font ($ farve) {
  font-familie: Arial, Helvetica, sans-serif;
  skriftstørrelse: 16px;
  farve: $ farve;
}
krop {
  baggrund: $ farve;
  margen: 0;
  @ medtag min-font (hvid);
}

Som vi kan se, har SCSS (Sassy CSS) en CSS-lignende syntaks, som er meget lettere at læse. Det er en udvidelse af CSS, hvorimod Sass har en mere anden syntaks. Deres filtypenavn er også forskellige: .sass & .scss.

Du kan læse mere om det her. Lad os gå videre med funktionerne i Sass.

Funktion # 1: Variabler

Forskellige CSS-klasser kan indeholde den samme regel eller regler i et projekt. For eksempel har vi 20 kasser på vores webside med forskellige baggrundsfarver:

.box-1 {
   bredde: 100px;
   højde: 100px;
   baggrund: rød;
}
.box-2 {
   bredde: 100px;
   højde: 100px;
   baggrund: gul;
}
...
.box-20 {
   bredde: 100px;
   højde: 100px;
   baggrund: blå;
}

Senere skifter vores klient mening og ønsker større kasser. Så jeg er nødt til at øge hver klasses bredde- og højdeegenskaber en efter en. Dette kan også være 50 klasser. I programmering i det virkelige liv kan dette være frustrerende. Som jeg nævnte ovenfor, er dette et eksempel på stor indsats for små ændringer.

Hvordan kan vi gøre det mere effektivt?

Sass giver en løsning: variabler. Som på andre programmeringssprog kan vi bruge variabler til at gemme værdier og genbruge dem senere.

Definition af en variabel:

$ variabel-navn: værdi;

Gå tilbage til eksemplet ovenfor, hvis vi definerer variabler for bredde og højde:

$ box-bredde: 100px;
$ kassehøjde: 100px;

senere, når en ændring er nødvendig, er det kun vi, der skal gøre, at ændre deres værdier én gang:

$ box-bredde: 200px; // ændret fra 100 px til 200 px
$ kassehøjde: 200px; // det er alt!
.box-1 {
   bredde: $ kassebredde; // bruger variabler nu i stedet for pixels
   højde: $ kassehøjde;
   baggrund: rød;
}
.box-2 {
   bredde: $ kassebredde;
   højde: $ kassehøjde;
   baggrund: gul;
}
...
.box-20 {
   bredde: $ kassebredde;
   højde: $ kassehøjde;
   baggrund: blå;
}

CSS selv understøtter også variabler nu, men det fungerer ikke i IE og gamle versioner af andre browsere:

https://caniuse.com/

Funktion # 2: Indlejring

Standard CSS understøtter ikke indlejring. Vi kan ikke skrive en klasse i en anden klasse. Når projektet bliver større, bringer dette et læsbarhedsproblem, og strukturen ser ikke flot ud.

Lad os f.eks. Definere en navigationsmenu med klikbare links i HTML nedenfor:

HTML understøtter indlejret kode. Uden reden, ser de sådan ud i CSS:

CSS klasser til navigationsmenu

Vi var nødt til at skrive nav for hvert tag, også for pseudoklassen til ankeret (hover), fordi nav er det overordnede tag for alle. Sass understøtter dog indlejring:

Samme klasser med Sass

Her kan vi skrive bedre struktureret kode som i HTML. Vi behøver ikke at skrive nav-klasse efter klasse, hvilket også forhindrer redundans

Vigtigt: Det anbefales ikke at indlejre klasser dybere end 3 niveauer.

Funktion # 3: Mixins

Vi lærte ovenfor, hvordan man bruger variabler til CSS-regler. Men hvad nu hvis vi skal bruge en gruppe regler sammen? Sass har en funktion kaldet mixins, der lader os gøre det.

Hvad er en Mixin?

Mixins er Sass-funktioner, der grupperer CSS-deklarationer sammen. Vi kan genbruge dem senere som variabler.

Vi kan oprette en mixin med @ mixin-kommando efterfulgt af et navn:

@mixin my-font {
  font-familie: Arial, Helvetica, sans-serif;
  skriftstørrelse: 16px;
  font-stil: kursiv;
}

eller vi kan oprette en mixin som en funktion og tilføje parametre også:

$ font-farve: rød;
@mixin my-font ($ font-farve) {
  font-familie: Arial, Helvetica, sans-serif;
  skriftstørrelse: 16px;
  font-stil: kursiv;
  farve: $ font-farve;
}

Efter oprettelse af mixin kan vi bruge det i enhver klasse med @ include kommando. Så vi kan bruge my-font mixin i stedet for 4 linjer med fontregler hver gang. Denne tilgang forenkler koden.

p {
  @ medtag min-font;
}
Brug af mixins er en god måde at forhindre kodeadundans på.

Funktion # 4: Import

Endelig kan vi klippe vores enorme CSS-filer i mindre stykker med Sass-importfunktion. Det er meget lettere at læse og vedligeholde mindre filer i stedet for en stor fil med uendelige linjer.

Faktisk har CSS nu også en importfunktion. Men det fungerer anderledes. CSS sender en HTTP-anmodning til serveren hver gang for at importere en fil. Sass gør det uden en HTTP-anmodning, hvilket er en hurtigere tilgang.

Alt hvad du behøver er at importere din Sass-fil med @ import-kommandoen til en anden Sass-fil:

// Din vigtigste Sass-fil
@import 'fil';
@import 'anotherFile';
.klasse {
  // Din kode
}
Vi behøver ikke at bruge .scss-udvidelserne i filstien, Sass vil forstå det.

Så dette er nogle vigtige funktioner i Sass, som hjælper os med at skrive mere effektiv CSS-kode. Der er også andre gode funktioner, måske kan jeg dække dem i en anden artikel. For en bedre forståelse kan du installere Sass på dit system. Eller du kan starte kodningen direkte på codepen.io.

Jeg håber, du finder denne artikel nyttig. Hvis der er noget, du ikke forstår, skal du kommentere dine spørgsmål nedenfor.

Tjek min profil for andre artikler:

Mange tak & indtil næste gang!

Denne historie er offentliggjort i The Startup, Medium's største iværksætterpublikation efterfulgt af +387.966 personer.

Abonner for at modtage vores tophistorier her.