Kaj je SASS

SASS

Predviden čas branja: 6 minut

Kazalo vsebine

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.

Kaj 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.

Zakaj je potreben SASS?

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:

  • Spremenljivke: V SASS sistemu lahko informacije shranite v spremenljivke in jih pozneje ponovno uporabite. Na primer, vrednost barve je mogoče shraniti centralno pod bolj priročno spremenljivko.

  • Matematične funkcije: V SASS-u lahko uporabljate tudi matematične operatorje, kot so +, -, *, / ali %. Z njimi lahko na primer vplivate na specifikacije velikosti.

  • Funkcije: Delo z oblikovanjem vam olajšajo tudi druge funkcije. Z njimi lahko na primer prilagodite vrednosti barv ali analizirate sezname.

  • Zanke: Druga prednost SASS sistema je, da lahko uporabljate zanke. To se ponavlja, dokler ni dosežen status, ki ga določite vi.

  • Razlikovanje med primeri: Podobno delujeta tudi pogojna stavka if in else. Določeni ukazi se izvedejo le, ko nastopijo določena stanja.

  • Mešanice: Tako imenovane mešanice predstavljajo predloge. Te lahko ustvarite sami ali pa jih preprosto vključite v svojo kodo, če uporabljate ogrodje.

  • Odmiki: Izvirni SASS (v nasprotju s SCSS) za strukturiranje kode uporablja alineje in prelome vrstic. Za označevanje gnezdenja niso potrebne oznake v obliki oklepajev ali podpičja za označevanje konca vrstice.

  • Gnezdenje: CSS ne omogoča gnezdenja v kodi. SASS pa uporabniku omogoča tudi vizualni prikaz odvisnosti, kar zmanjšuje odvečno delo in zmanjšuje potrebo po pisanju.

  • Podedovanje: Lastnosti je mogoče podedovati iz enega izbirnika v drugega. S tem se prihrani tudi delo pri pisanju in koda je preglednejša.

  • Delne datoteke: Za vključitev elementov kode v SASS datoteko lahko uporabite tudi tako imenovane delne datoteke. To so datoteke, ki morajo vsebovati le nekaj vrstic CSS-a in se z ukazom uvozijo v SASS datoteko.

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.

Od SASS do CSS

Č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.

SCSS in SASS: kakšne so razlike?

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.

Prednosti in slabosti sistema SASS

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.

PrednostiSlabosti
Več možnostiKodo je treba skompilirati
Jasnejša kodaTežje odpravljanje napak
Obsežni okviriVečji učni napor
Delo z mešanicami in spremenljivkami 

SASS proti LESS

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.

Potrebujete pomoč?

Darko Kostić
Imate vprašanja ali posebno zahtevo?
Naša strokovna ekipa vam je na voljo.

Dogovorite se za brezplačno in nezavezujoče svetovanje!

Pošlji sporočilo

Najnovejše z bloga

Vpliv Core Web Vitals na SEO

Vpliv Core Web Vitals na SEO

2. januarja 2024
Odkrijte vlogo Core Web Vitals pri optimizaciji za iskalnike. Odkrijte, zakaj je ta dejavnik pomemben za uspeh vaših spletnih strain.
Prihodnost spletnega oblikovanja

Prihodnost spletnega oblikovanja: napoved trendov

18. decembra 2023
Z razvojem umetne inteligence in strojnega učenja bodo spletna mesta postala bolj intuitivna in prilagojena potrebam posameznega uporabnika.
Kako spletno oblikovanje vpliva na SEO - postavitev spletne strani

Kako spletno oblikovanje vpliva na SEO

4. decembra 2023
Ali ste vedeli, da ima spletno oblikovanje ključno vlogo pri vaših prizadevanjih za SEO? V tem članku bomo raziskali razmerje med tema elementoma.
Top homeapartmentmagic-wandenvelopeprinterbookusercartphone-handsetmap-markerlaptop-phonegiftdiamondearthmagnifierlayers