Eeltöötleja (Sass) kasutamise eelised CSS-i arendamisel

Maik Jonietzi “programmiskripti digitaalne taustpilt” saidil Unsplash

Veebis on palju argumente selle kohta, kas CSS-eeltöötleja kasutamine on arengus kasulik või mitte. Minu isiklik arvamus on, et te ei vaja väikeste veebiprojektide või rakenduste jaoks eeltöötlejat.

CSS-koodi hooldus ja loetavus muutub projekti suurenedes aga raskemaks. Tegeledes tuhandete ridade CSS-i reeglitega, kulutage arendajatele aega ja suurendage projekti kulusid. Projekti suurenedes põhjustab CSS järgmisi probleeme:

  • Suur pingutus väikeste muudatuste nimel
  • Koodi struktureerimise raskused
  • Koodi koondamine
  • CSS-i klasside ja reeglite lõputud read

Eeltöötleja aitab meil nende probleemidega toime tulla. Sellel on tavalise CSS-i ees mõned eelised. Enne kui sügavamale sukelduda, selgitage kõigepealt, mis on CSS-i eeltöötleja ...

Mis on CSS eeltöötleja?

Programm / tööriist, millel on oma süntaks, mis hiljem kompileeritakse standardsesse CSS-koodi.

Eeltöötlejal on oma süntaks, mille abil arendajad saavad lihtsama ja puhtama CSS-koodi kirjutada. Hiljem tõlgitakse see eraldi failina standardsesse CSS-i, kuna brauserid ei mõista süntaksit.

Eeltöötlejaid on erinevaid, näiteks Sass, Less ja Stylus. Selles artiklis selgitan Sassi eeliseid.

Mis on Sass?

Viide: Sassi ametlik veebisait

Sass on üks CSS-i eeltöötlejaid kõige laialdasemalt kasutatav. Sellel on mitmeid funktsioone, mis aitavad arendajatel kirjutada paremat ja puhtamat CSS-koodi. Lisateavet saate Sassi ametlikust veebisaidilt ja Githubi hoidlast.

KKK: Sass vs SCSS

See on sagedamini esitatav küsimus. Nad on mõlemad Sassi erineva süntaksiga. SCSS on põhimõtteliselt uuem versioon, Sassi versioon 3.

Sass-süntaksi näide:

$ värv: hall
= minu font ($ värv)
  fondiperekond: Arial, Helvetica, sans-serif
  kirjasuurus: 16 pikslit
  värv: $ värv
keha
  taust: $ värv
  veeris: 0
  + minu font (valge)

Näide SCSS süntaksist:

$ värv: hall;
@mixin my-font ($ color) {
  fondiperekond: Arial, Helvetica, sans-serif;
  kirjasuurus: 16 pikslit;
  värv: $ värv;
}
keha {
  taust: $ värv;
  veeris: 0;
  @ lisage minu font (valge);
}

Nagu näeme, on SCSS-il (Sassy CSS) CSS-i laadne süntaks, mida on palju lihtsam lugeda. See on CSS-i laiendus, samas kui Sassi süntaks on teistsugune. Nende faililaiend on ka erinev: .sass ja .scss.

Selle kohta saate rohkem lugeda siit. Liigume edasi Sassi funktsioonidega.

Funktsioon nr 1: muutujad

Erinevad CSS-i klassid võivad sisaldada projektis sama reeglit või reegleid. Näiteks on meie veebilehel 20 lahtrit, millel on erinevad taustvärvid:

.box-1 {
   laius: 100 pikslit;
   kõrgus: 100 pikslit;
   taust: punane;
}
.box-2 {
   laius: 100 pikslit;
   kõrgus: 100 pikslit;
   taust: kollane;
}
...
.box-20 {
   laius: 100 pikslit;
   kõrgus: 100 pikslit;
   taust: sinine;
}

Hiljem muudab meie klient meelt ja soovib suuremaid kaste. Nii et ma pean suurendama iga klassi laiuse ja kõrguse omadusi ükshaaval. See võiks olla ka 50 klassi. Tegeliku elu programmeerimisel võib see olla pettumust valmistav. Nagu ma eespool mainisin, on see näide väikeste muudatuste nimel tehtavatest suurtest pingutustest.

Kuidas saaksime seda tõhusamalt teha?

Sass pakub lahenduse: muutujad. Nagu teisteski programmeerimiskeeltes, saame ka muutujaid väärtuste salvestamiseks ja hiljem nende taaskasutamiseks.

Muutuja määratlus:

$ muutuja nimi: väärtus;

Naastes ülaltoodud näite juurde, kui määratleme muutujad laiuse ja kõrguse jaoks:

$ kasti laius: 100 pikslit;
$ kasti kõrgus: 100 pikslit;

hiljem, kui on vaja muudatust, peame vaid muutma nende väärtusi üks kord:

$ kasti laius: 200 pikslit; // muudetud 100 pikslist 200 pikslile
$ kasti kõrgus: 200 pikslit; // see on kõik!
.box-1 {
   laius: $ kasti laius; // kasutades muutujaid nüüd pikslite asemel
   kõrgus: $ box-height;
   taust: punane;
}
.box-2 {
   laius: $ kasti laius;
   kõrgus: $ box-height;
   taust: kollane;
}
...
.box-20 {
   laius: $ kasti laius;
   kõrgus: $ box-height;
   taust: sinine;
}

CSS ise toetab ka muutujaid nüüd, kuid see ei tööta muude brauserite IE ja vanade versioonide korral:

https://caniuse.com/

Funktsioon nr 2: pesitsemine

Standardne CSS ei toeta pesastamist. Me ei saa klassi kirjutada teise klassi sees. Projekti suurenedes tekitab see loetavusprobleeme ja struktuur ei tundu kena.

Näiteks määratleme allpool navigeerimismenüü HTML-is klõpsatavate linkidega:

HTML toetab pesastatud koodi. Pesitsemata näevad nad CSS-is välja sellised:

CSS-klassid navigeerimismenüü jaoks

Pidime kirjutama navid iga sildi jaoks, isegi ankru pseudoklassi jaoks (hõljutage kursorit), kuna nav on kõigi vanemmärgend. Sass toetab aga pesitsemist:

Samad klassid Sassiga

Siin saame kirjutada paremini struktureeritud koodi nagu HTML-is. Me ei pea navigeerimisklassi pärast klassi kirjutama, mis hoiab ära ka koondamise

Tähtis: klasse ei soovitata pesitseda sügavamale kui 3 taset.

Funktsioon nr 3: Mixins

Eespool õppisime, kuidas kasutada muutujaid CSS-i reeglite jaoks. Aga mis siis, kui peame koos kasutama reeglistikku? Sassi funktsioon on mixins, mis laseb meil seda teha.

Mis on miksin?

Miksiinid on Sassi funktsioonid, mis rühmitavad CSS-i deklaratsioonid. Saame neid hiljem muutujatena kasutada.

Saame luua mixini käsuga @ mixin, millele järgneb nimi:

@mixin my-font {
  fondiperekond: Arial, Helvetica, sans-serif;
  kirjasuurus: 16 pikslit;
  kirjastiil: kaldkiri;
}

või saame luua funktsioonina mixini ja lisada ka parameetreid:

$ font-color: punane;
@mixin my-font ($ font-color) {
  fondiperekond: Arial, Helvetica, sans-serif;
  kirjasuurus: 16 pikslit;
  kirjastiil: kaldkiri;
  värv: $ font-color;
}

Pärast mixini loomist saame seda kasutada igas klassis, mille käsk on @ include. Seega saame iga kord 4 font-reeglirea asemel kasutada my-font mixini. See lähenemisviis lihtsustab koodi.

p {
  @ lisage minu font;
}
Miksiinide kasutamine on hea viis koodide koondamise vältimiseks.

Funktsioon nr 4: import

Lõpuks saame oma suured CSS-failid väiksemateks tükkideks lõigata, kasutades Sasi importimise funktsiooni. Väiksemate failide lugemine ja hooldamine on palju lihtsam kui ühe suure lõputute ridadega fail.

Tegelikult on CSS-il nüüd ka impordifunktsioon. Kuid see töötab teisiti. CSS saadab serverile faili importimiseks iga kord HTTP-päringu. Sass teeb seda ilma HTTP-päringuta, mis on kiirem lähenemisviis.

Teil on vaja vaid importida oma Sassi fail koos käsuga @ import teise Sassi faili:

// Teie peamine Sassi fail
@import 'fail';
@import 'elseFile';
.klass {
  // Teie kood
}
Me ei pea failiteedes kasutama .scss laiendusi, Sass saab sellest aru.

Need on Sassi mõned olulised omadused, mis aitab meil kirjutada tõhusama CSS-koodi. On ka muid toredaid funktsioone, võib-olla saan neid käsitleda mõnes teises artiklis. Parema mõistmise huvides võite oma süsteemi installida Sassi. Või võite otse kodeerimist alustada koodpen.io.

Loodetavasti leiate sellest artiklist abi. Kui on midagi, millest te ei saa aru, kommenteerige allpool esitatud küsimusi.

Muust artiklist leiate minu profiili:

Suured tänud ja kuni järgmise korrani!

See lugu on avaldatud Mediumi suurimas ettevõtlusväljaandes The Startup, millele järgneb +387 966 inimest.

Liituge, et saada meie parimaid lugusid siit.