CSS Preprocesori sve više postaju glavni oslonac u tijeku rada razvojnih web programera. CSS je nevjerojatno kompliciran i nijansiran jezik, a u nastojanju da mu olakšaju upotrebu, programeri se često okreću upotrebi pretprocesora kao što su SASS ili LESS.
CSS predprocesori kompajliraju kod koji je napisan pomoću posebnog kompajlera. Zatim to koriste za stvaranje CSS datoteke, na koju se zatim može uputiti glavni HTML dokument.
Kada koristite bilo koji CSS pretprocesor, moći ćete programirati u uobičajenom CSS-u, baš kao što bi i bio da pretprocesor nije na svom mjestu. Dobra stvar je što vam je na raspolaganju i više mogućnosti. Neki, poput SASS-a, imaju specifične stilske standarde koji bi trebali olakšati pisanje dokumenta, poput slobode izostavljanja zagrada ako želite.
Naravno, CSS Preprocesori nude i druge značajke. Mnoge ponuđene značajke nevjerojatno su slične među pretprocesorima, s tek malim odstupanjima u sintaksi. Dakle, možete odabrati gotovo bilo koga koga želite i moći ćete postići iste stvari. Neke korisnije značajke su:
Varijable
Jedna od najčešće korištenih stavki u bilo kojem programskom jeziku je varijabla, nešto što CSS-u posebno nedostaje. Imajući na raspolaganju varijable, možete jednom definirati vrijednost i ponovno upotrijebiti tijekom cijelog programa. Primjer toga u SASS-u bio bi:
$yourcolor: #000056 .yourDiv { color: $yourcolor; }SASS yourcolorJednom deklaracijom varijable sada je moguće ponovno upotrijebiti istu točnu boju u cijelom dokumentu bez potrebe za ponovnim upisivanjem definicije.
Petlje
Još jedna uobičajena stavka u jezicima su petlje, a nešto drugo nedostaje CSS-u. Petlje se mogu koristiti za ponavljanje istih uputa više puta, bez potrebe za ponovnim unosom više puta. Primjer sa SASS-om bio bi:
@for $vfoo 35px to 85px { .margin-#{vfoo} { margin: $vfoo 10px; } }Ova petlja nas štedi od potrebe da više puta napišemo isti kôd za promjenu veličine margine.
If / Else izjave
Još jedna značajka kojoj CSS nedostaje su izjave If / Else. Oni će pokrenuti niz uputa samo ako je zadani uvjet istinit. Primjer toga u SASS-u bio bi:
@if width(body) > 500px { background color: blue; } else { background color: white; }Ovdje će boja pozadine promijeniti boju ovisno o širini tijela stranice.
Ovo je samo nekoliko glavnih funkcija CSS pretprocesora. Kao što vidite, CSS Preprocesori nevjerojatno su korisni i različiti alati. Mnogi ih web programeri koriste, a toplo se preporučuje naučiti barem jednog od njih.
Više informacija:
- Najbolji CSS vodiči
- SASS dokumenti: //sass-lang.com/
- SASS, pretprocesor za vaše web ukrase
- MANJE dokumenata: //lesscss.org/
- Dokumenti za stylus: //stylus-lang.com/