S CSS lahko oblikujete spletna mesta po svojih zamislih. Vendar ima CSS svoje omejitve. Številni spletni oblikovalci si želijo udobnejšega načina dela pri oblikovanju spletnih strani. Tu pridejo na vrsto CSS predprocesorji. S pomočjo razširjenega slogovnega jezika, ki je bolj ali manj razširitev osnovnega CSS jezika, si lahko močno poenostavite delo pri oblikovanju. Najbolj znan med temi razširjenimi jeziki je SASS.
Da bi razumeli, kaj je SASS jezik in zakaj ga sploh potrebujete, morate razumeti namen CSS-a. Spletne strani temeljijo na označevalnem HTML jeziku. Če želite oblikovati v HTML jeziku, morate vsebino neposredno povezati z oblikovanjem na vsaki strani. Preprosto povedano, HTML ni namenjen oblikovanju in je zato na tem področju zelo omejen. CSS določa predstavitev HTML strani. CSS leži na vrhu HTML kode kot predloga in določa obliko vsakega elementa na strani: pisava, barva besedila, ozadje itd. Spletni oblikovalci uporabljajo CSS za opredelitev vseh elementov oblikovanja.
Če želite na primer nastaviti vse naslove v velikosti 22 pik v Calibri pisavi, to določite v CSS-u, ki podaja navodila za videz spletne strani. Ta pravila so običajno v ločeni datoteki, na katero se sklicujejo vse HTML strani.
Toda CSS ima svoje omejitve, ki postanejo jasne zlasti takrat, ko se z jezikom ukvarjate že več let. Prednost CSS-a je hkrati ena od njegovih slabosti. Jezik je zelo preprost. SASS naredi vse skupaj nekoliko bolj zapleteno in močno poenostavi delo pri oblikovanju zasnove.
Vsi sodobni brskalniki lahko brez težav prikazujejo CSS, vendar to ne velja za SASS (ki se uporablja že več kot 10 let) ali druge napredne jezike za oblikovanje slogov. Zato se SASS obravnava kot predprocesor. Koda v SASS dokumentu se najprej pretvori v CSS, nato pa sistem zagotovi izvorno kodo in s tem spletno mesto.
Najprej se zdi, da SASS ni potreben. Navsezadnje je bilo mogoče s CSS v zadnjih desetletjih razviti odlične strani z vidika oblikovanja. Tudi če želite od zdaj naprej delati s SASS sistemom SASS, se ne morete izogniti CSS-u, ki bo tudi v prihodnje osnova za predstavitev. SASS in drugi jeziki so le CSS ogrodje.
Vendar pa imate s SASS na voljo nekatere možnosti, ki jih CSS sam po sebi ne ponuja:
Za SASS že obstaja nekaj uporabnih ogrodij ali knjižnic. Compass ali Bourbon opravita veliko dela z oblikovanjem spletnega mesta.
SASS je licenciran z MIT licenco in je zato odprtokoden. Vendar pa zdaj obstajajo tudi druge izvedbe jezika, ki so pod lastniškimi licencami, vendar jih je včasih lažje uporabljati.
Če želite zagotoviti, da bo ustvarjena SASS koda imela želeni učinek, jo morate najprej pretvoriti v navadno CSS kodo. Sestavljanje poteka preprosto z ukazom v ukazni vrstici:
sass primer.sass:primer.css
Ta ukaz združi izvorno kodo iz datoteke primer.sass, ki ste jo ustvarili, v novo CSS datoteko. Pri tem se SASS sintaksa samodejno prilagodi CSS pravilom. Na primer, rešene so dednosti in prilagojena je sintaksa.
Delo na spletni strani je le redko zares končano, zato lahko zasnovo redno spreminjate. Zato vam SASS omogoča spremljanje map ali datotek s parametrom --watch. Če jih spremenite, se sistem samodejno ponovno sestavi.
Ne obstaja samo ena sintaksa, v kateri lahko uporabljate SASS, temveč dve: na eni strani imate izvirno obliko, ki se pogosto imenuje "sintaksa z vrezanimi črkami" ali preprosto "SASS". Poleg tega obstaja novejša različica, ki je bolj usmerjena v specifikacije CSS in se zato imenuje Sassy CSS (SCSS) - tj. CSS v slogu SASS. Z različico 3 SASS programa je bil SCSS uveljavljen kot uradna sintaksa. Največja razlika je v uporabi oklepajev in podpičij.
Izvirna sintaksa SASS deluje z alinejami in prelomi vrstic, kar je postopek po vzoru YAML. Za dokončanje vrstice je dovolj, da naredite prelom vrstice, tj. pritisnete tipko Enter. Odmiki delujejo preprosto prek tabulatorja. Tako se s spreminjanjem položaja v pisavi oblikujejo skupine - tako imenovani deklaracijski bloki. To ni mogoče s samim CSS-om. Pri tem je treba uporabiti oglate oklepaje za razvrščanje v skupine in podpičja za navodila o lastnostih.
In tukaj nastopi dilema: nekateri uporabniki prisegajo na preprosto uporabo izvirnega SASS-a, kjer vam ni treba paziti na pravilne nastavitve oklepajev pri premikanju izsekov izvorne kode in ki na splošno ustvarja preglednejšo kodo. Na splošno "sintaksa z alinejami" zahteva manj znakov in vrstic. Po drugi strani pa zagovorniki SCSS z veseljem sprejmejo dodaten napor, saj je bolj podoben tistemu, kar je že znano iz CSS-a.
SCSS je nadmnožica CSS, kar zagotavlja, da CSS koda v osnovi deluje tudi v SCSS, ne pa tudi obratno. Kljub temu so SASS funkcije še vedno v celoti vključene. Tako lahko lažje delate z obema jezikoma hkrati. Poleg tega je za ljudi, ki že delajo s CSS in so se navadili na sintakso, prehod veliko lažji. Čeprav SASS podpira obe sintaksi, se morate odločiti za vsak projekt posebej: Da bi lahko razlikovali med različnimi oblikami, datotekam dodelite končnico .sass ali .scss.
SASS ima nekaj prednosti, vendar ne prepriča vseh. Prednosti so očitne: jezik predprocesorja daje uporabniku več možnosti pri ustvarjanju kode. Številni spletni oblikovalci na primer cenijo funkcijo shranjevanja barv v spremenljivkah, namesto da bi morali vedno navajati vrednost barve v šestnajstiškem številu. Mešanice, spremenljivke, dedovanje in gnezdenje omogočajo veliko lažje upoštevanje načela "ne ponavljaj se" kot v tradicionalnem CSS-u. Ta teorija zagovarja izogibanje ponovitvam v kodi in s tem preglednejšo izvorno kodo. Poleg tega se s tem močno zmanjša napor, ki je potreben za spremembe. Namesto da bi spremembe izvajali na več mestih, jih je treba izvesti le centralno na enem mestu.
Pomanjkljivosti SASS-a načeloma veljajo za vsak predprocesor in so povezane z dejstvom, da je treba ustvarjeno kodo najprej skompilirati. S tem se postopek razvoja še dodatno podaljša. Zaradi tega je postopek nekoliko bolj naporen. Namesto da bi lahko prilagoditve izvedli neposredno v CSS datoteki in učinke takoj videli na spletnem mestu, je treba spremembe zasnove najprej prevesti v CSS. Pri tem se lahko prikradejo napake in odpravljanje napak je težje.
Poleg tega se morate pred uporabo SASS-a, tako kot pri vsaki tehnologiji, ki je ne poznate - potruditi pri učenju novega jezika. Poleg jezika CSS, ki ga morate vsekakor poznati, morate obvladati še en jezik.
Prednosti | Slabosti |
Več možnosti | Kodo je treba skompilirati |
Jasnejša koda | Težje odpravljanje napak |
Obsežni okviri | Večji učni napor |
Delo z mešanicami in spremenljivkami |
Poleg SASS-a se je v krogih razvijalcev uveljavil tudi LESS. Ta jezik slogov je bolj usmerjen v CSS in je zato bolj podoben SCSS sintaksi. Predprocesorja imata nekatere skupne lastnosti: tako SASS kot LESS na primer uporabljata mešanice in spremenljivke. Razlika je v tem, da SASS temelji na jeziku Ruby, LESS pa uporablja JavaScript. Vendar tudi to ne pomeni, da ima eden od obeh predprocesorjev prednost pred drugim.
Resnične razlike so v logičnih funkcijah: LESS uporabnikom omogoča, da mešanice aktivirajo le v določenih primerih. To je koristna funkcija, vendar s tem izčrpa možnosti uporabe logičnih povezav v programu. Po drugi strani pa SASS ponuja zanke in razlikovanje med velikostmi, kot jih poznamo iz programskih jezikov.
Pri SASS se lahko uporabniki svobodno odločijo, ali bodo raje uporabljali "sintakso z alinejami" ali SCSS. Tako se lahko vsak razvijalec sam odloči, ali se želi oddaljiti od CSS pravil ali raje ostati blizu izvirniku. V primeru LESS-a te možnosti ni. Pri tem morajo uporabniki upoštevati znana pravila. Zato je koda v jeziku LESS samodejno tudi nadmnožica CSS-a. Vsako izvorno besedilo, oblikovano v CSS-u, deluje tudi v LESS-u, tako kot SCSS.
SASS je veliko bolj priljubljen med spletnimi oblikovalci. Vendar je to lahko tudi posledica dejstva, da je SASS nekoliko starejši. LESS je sprva še vedno podpiralo cenjeno ogrodje Bootstrap, ki se je opiralo na mlajši predprocesor. Z različico 4 pa je projekt uradno prešel na SASS, kar naj bi povečalo priljubljenost sintaktično čudovitih slogovnih listov.