Prednosti upotrebe predprocesora (Sass) u razvoju CSS-a

Na webu postoji mnogo argumenata je li korištenje CSS Preprocesora korisno u razvoju ili ne. Moje osobno mišljenje je da možda nećete trebati predprocesor za male web projekte ili aplikacije.

Međutim, održavanje i čitljivost CSS koda postaju sve teži kako projekt postaje sve veći. Baveći se tisućama redaka CSS pravila, otpad programerima gubi vrijeme i povećava troškove projekta. Kako projekt postaje sve veći, CSS uzrokuje neke probleme poput:

  • Veliki napor za male promjene
  • Poteškoće u strukturiranju koda
  • Prekomjernost koda
  • Beskonačne linije CSS klasa i pravila

Preprocesor nam pomaže da se nosimo s tim problemima. Ima neke prednosti u odnosu na obični CSS. Prije nego što zaronimo dublje, prvo objasnite što je CSS pretprocesor ...

Što je CSS predprocesor?

Program / alat koji ima svoju sintaksu koja se kasnije sastavlja u standardni CSS kôd.

Preprocesor ima svoju sintaksu za programere da napišu jednostavniji i čistiji CSS kôd. Kasnije se prevodi u zasebnu datoteku u standardni CSS jer preglednici ne razumiju sintaksu.

Postoje različiti predprocesori poput Sass, Less i Stylus. U ovom ću članku objasniti neke prednosti Sass-a.

Što je Sass?

Reference: Službena web stranica Sass

Sass je jedan od najčešće korištenih CSS predprocesora. Ima razne značajke koje pomažu programerima da pišu bolji i čistiji CSS kôd. Više detalja možete potražiti na službenoj web stranici Sass & Github repozitorijumu.

FAQ: Sass vs SCSS

Ovo je najčešće postavljeno pitanje. Oni su zapravo obojica Sass s različitom sintaksom. SCSS je u osnovi novija verzija, Sass Verzija 3.

Primjer Sass sintakse:

$ boja: siva
= Moja-font ($ boja)
  obitelj fontova: Arial, Helvetica, sans-serif
  veličina fonta: 16px
  boja: $ boja
tijelo
  pozadina: $ boja
  marža: 0
  + Moj-font (bijela)

Primjer SCSS sintakse:

$ boja: siva;
@mixin my-font ($ color) {
  obitelj fontova: Arial, Helvetica, sans-serif;
  veličina fonta: 16px;
  boja: $ boja;
}
tijelo {
  pozadina: $ boja;
  marža: 0;
  @ uključite moj font (bijeli);
}

Kao što vidimo, SCSS (Sassy CSS) ima sintaksu sličnu CSS-u, što je mnogo lakše čitati. To je proširenje CSS-a, dok Sass ima drugačiju sintaksu. Njihovo se proširenje datoteka također razlikuje: .sass & .scss.

Više o tome možete pročitati ovdje. Krenimo s značajkama Sass-a.

Značajka br. 1: Varijable

Različite CSS klase mogu sadržavati isto pravilo ili pravila u projektu. Na primjer, na našoj web stranici imamo 20 okvira s različitim bojama pozadine:

.box-1 {
   širina: 100px;
   visina: 100px;
   pozadina: crvena;
}
.box-2 {
   širina: 100px;
   visina: 100px;
   pozadina: žuta;
}
...
.box-20 {
   širina: 100px;
   visina: 100px;
   pozadina: plava;
}

Kasnije naš klijent mijenja mišljenje i želi veće kutije. Dakle, moram jedno po jedno povećavati svojstva širine i visine svake klase. To bi moglo biti i 50 sati. U stvarnom životu to može biti frustrirajuće. Kao što sam gore spomenuo, ovo je primjer velikog napora za male promjene.

Kako to možemo učinkovitije?

Sass nudi rješenje: varijable. Kao i u drugim programskim jezicima, i mi možemo koristiti varijable za pohranjivanje vrijednosti i kasnije ih ponovo koristiti.

Definicija varijable:

$ varijabla-ime: vrijednost;

Vratimo se gore navedenom primjeru ako definiramo varijable za širinu i visinu:

$ širina kutije: 100px;
$ box-height: 100px;

kasnije kad je potrebna promjena, preostaje nam samo da promijenimo njihove vrijednosti jednom:

$ širina kutije: 200px; // promijenjeno iz 100px u 200px
$ visina kutije: 200 px; // to je sve!
.box-1 {
   širina: $ box-width; // koristeći varijable sada umjesto piksela
   visina: $ box-height;
   pozadina: crvena;
}
.box-2 {
   širina: $ box-width;
   visina: $ box-height;
   pozadina: žuta;
}
...
.box-20 {
   širina: $ box-width;
   visina: $ box-height;
   pozadina: plava;
}

Sam CSS sada također podržava varijable, ali ne funkcionira u IE i starim verzijama drugih preglednika:

https://caniuse.com/

Značajka 2: Gniježđenje

Standardni CSS ne podržava gniježđenje. Ne možemo pisati klasu unutar druge klase. Kako projekt postaje sve veći, to donosi problem čitljivosti i struktura ne izgleda lijepo.

Na primjer, dolje definiramo navigacijski izbornik s linkovima na koje se može kliknuti u HTML-u:

HTML podržava ugniježđeni kôd. Međutim, bez gniježđenja, u CSS-u izgledaju ovako:

CSS klase za navigacijski izbornik

Morali smo napisati nav za svaku oznaku, čak i za pseudo-klasu sidra (lebdjeti), jer nav je roditeljska oznaka svih. Sass, međutim, podržava gniježđenje:

Isti časovi sa Sassom

Ovdje možemo napisati bolje strukturirani kôd kao u HTML-u. Ne moramo pisati nav klasu nakon nastave, što također sprječava suvišnost

Važno: Ne preporučuje se gnijezđenje klasa dubljih od 3 razine.

Značajka br. 3: Mixins

Gore smo naučili kako koristiti varijable za CSS pravila. Ali što ako trebamo zajedno koristiti skupinu pravila? Sass ima značajku koja se zove mixins, omogućavajući nam to.

Što je Mixin?

Mixins su Sass funkcije koje zajedno grupiraju CSS deklaracije. Kasnije ih možemo ponovo upotrijebiti kao varijable.

Miksin možemo stvoriti pomoću naredbe @ mixin, nakon čega slijedi naziv:

@mixin my-font {
  obitelj fontova: Arial, Helvetica, sans-serif;
  veličina fonta: 16px;
  font fonta: kurziv;
}

ili možemo stvoriti mixin kao funkciju i dodati parametre:

$ font-boja: crvena;
@mixin my-font ($ font-color) {
  obitelj fontova: Arial, Helvetica, sans-serif;
  veličina fonta: 16px;
  font fonta: kurziv;
  boja: $ font-color;
}

Nakon stvaranja mixina, možemo ga koristiti u bilo kojoj klasi s naredbom @ include. Na taj način možemo svaki put koristiti miks font mixin umjesto 4 retka pravila o fontu. Ovaj pristup pojednostavljuje kod.

p {
  @ uključite moj font;
}
Korištenje miksina dobar je način da se spriječi suvišnost koda.

Značajka 4: Uvoz

Konačno, možemo smanjiti naše ogromne CSS datoteke na manje komade pomoću značajke Sass import. Mnogo je lakše čitati i održavati manje datoteke nego jednu veliku datoteku s beskonačnim linijama.

Zapravo CSS sada ima i značajku uvoza. Ali djeluje drugačije. CSS svaki put šalje poslužitelju HTTP zahtjev za uvoz datoteke. Sass to radi bez HTTP zahtjeva, što je brži pristup.

Sve što trebate je uvesti Sass datoteku naredbom @ import u drugu Sass datoteku:

// Vaša glavna datoteka Sass
@import 'datoteka';
@import 'AnotherFile';
.class {
  // Vaš kod
}
Ne moramo koristiti .scss ekstenzije u putu datoteke, Sass će to razumjeti.

Ovo su neke od važnih značajki Sass-a, što nam pomaže da napišemo učinkovitiji CSS kôd. Postoje i druge lijepe osobine, možda ih mogu opisati u nekom drugom članku. Da biste bolje razumjeli, možete instalirati Sass na svoj sustav. Ili možete izravno započeti kodiranje na codepen.io.

Nadam se da vam je ovaj članak koristan. Ako nešto ne razumijete, komentirajte svoja pitanja u nastavku.

Provjerite moj profil za ostale članke:

Puno hvala & do sljedećeg puta!

Ova priča objavljena je u najvećoj poduzetničkoj publikaciji The Startup, koju prati +387 966 ljudi.

Pretplatite se za primanje naših najboljih priča ovdje.