CSS je veoma jednostavan jezik koji odlično obavlja posao za koji je zadužen, a to je formatiranje i definiranje izgleda dokumenata zasnovanih na markup jezicima, najčešće HTML i XHTML.

No istini za volju, neke stvari tokom pisanja CSS stilova su dosadne i ponavljajuće. Da li ste se ikada zapitali kako bi bilo dobro da izvorni CSS ima podršku za varijable i osnovne matematičke operacije koje bi skratile vrijeme pri pisanju i budućih nadogradnji CSS stilova?

Neko očigledno jeste, jer danas na raspolaganju imamo CSS pred-procesore koji nadograđuju izvorni CSS sa dodatnim osobinama i mogućnostima, a najčešće se radi o podršci za varijable, operacije, funkcije, te mixin koncept koji omogućava da hrpu atributa brzo i jednostavno pridružite različitim stilovima i klasama.

Dva najpoznatija CSS pred-procesora su LESS i Sass, a iz samog naslova teksta je jasno o kojem ćemo detaljnije pisati u nastavku.

Sass je od početka svog razvoja imao jednu manu, a ona se je ogledala u činjenici da sintaksa za pisanje stilova nije bila slična sintaksi izvornog CSS-a, što je u velikoj mjeri umanjilo njegovu popularnost i prihvaćanje od strane front-end developera. Alexis Sellier, koji se potpisuje kao autor LESS-a, je shvatio prvobitnu manu Sass-a, i razvio LESS koji je koristio CSS sintaksu koji su korisnici poznavali već od ranije. Od verzije 3, i sam Sass je ponudio podršku za CSS sintaksu.

Less.js – JavaScript implementacija

LESS-a LESS je originalno bio razvijen kao Ruby gem, ali zbog svoje popularnosti ubrzo su se pojavile i implementacije za PHP i .NET. Međutim, LESS je reimplementiran u JavaScriptu, što znači da bi koristili LESS nije vam potreban Ruby, PHP, .NET niti bilo koji drugi serverski orijentiran jezik, već isključivo preglednik, koji naravno, ima uključenu podršku za JavaScript.

Prije nego napišemo nešto više o Less.js kompajleru, pokazat ćemo kako ga podesiti i spremiti za radno okruženje, a to je jako jednostavno i radi se o dvije linije koje treba spremiti u okviru head tagova HTML dokumenta. Prva linija referencira do styles.less datoteke, a druga do Less.js kompajlera. Neophodno je da prvo uključite .less datoteku, pa tek onda Less.js kompajler.
 

Varijable
 

Varijable vam omogućuju da odredite vrijednost, kao što je boja fonta, na jednom mjestu i koristite tu vrijednost kroz cijeli CSS dokument. Ova mogućnost olakšava pisanje CSS stilova, jer više nije potrebno da pamtite heksadecimalnu vrijednost boje, već samo naziv varijable koji može biti dovoljno opisan da bi bio lako pamtljiv. Ukoliko se desi situacija da morate promijeniti boju fonta, dovoljno je samo izmijeniti vrijednost varijable, a bez LESS-a bi to bilo nešto komplikovanije. 

Varijable se definiraju prema pravilu @naziv: vrijednost, što znači da svaka varijabla počinje sa znakom "@" i ima naziv, te dodijeljenu vrijednost. Naravno, naziv varijable je case-sensitive, a ako pokušate koristiti varijablu koju prethodno niste definirali, kompajler će vas uredno upozoriti na to. 
 

U LESS-u varijable imaju vidljivost tako da je moguće definirati varijable sa istim nazivom na različitim mjestima.

 

 

Mixins

Jako korisna i vjerovatno najupotrebljivija mogućnost LESS-a je mixin koncept koji vam omogućava da ugradite sve atribute jedne klase u drugu klasu navodeći samo naziv mixina kao jedan od atributa klase. Mixins se mogu ponašati kao funkcije što znači da mogu primati parametre, čija vrijednost može biti unaprijed definirana, kao što se može vidjeti u primjeru koji slijedi.

 

 

Mixins, kao i varijable je moguće grupisati, što se naziva upotrebom namespaceova ili imenskih prostora. Ako ste ozbiljnije programirali u nekom od programskih jezika, onda vam je koncept namespaceova već od ranije poznat. LESS za takvo nešto koristi operator '>'. U svakom slučaju mixin je sjajan koncept, ali trebate biti oprezni jer bi konačne CSS datoteke mogle sadržavati puno dupliciranih atributa, te pri korištenju istih koristite logiku i znanje kao i sa CSS-om sa ciljem da dobijete što manje i lakše CSS datoteke.

 

 

Operacije i funkcije

Operacije sabiranja, oduzimanja, množenja i dijeljenja se mogu primijeniti na bilo koji broj, boju ili varijablu. Primjeri će najbolje pokazati primjenu operatora. 

 

  

 

Ako je u varijabli navedena jedinica mjere, ista će se koristiti i u finalnom izlazu, a podržane su i zagrade koje možete koristiti da naznačite operacije višeg i nižeg reda. Operacije je jako zgodno koristiti kod elemenata koji su proporcionalni, a pomoću njih ćete i izbjeći moguću prekomjernu upotrebu varijabli. LESS pruža nekoliko funkcija koje možete iskoristiti za transformiranje boja, a njihova primjena je krajnje jednostavna.

 

      

 

Ugniježđeni stilovi

Sa ciljem da se postigne bolja i preglednija struktura CSS dokumenta, LESS uvodi podršku za ugniježđavanje stilova.

 

 

Kao što se može vidjeti iz primjera, izbjegnuto je stalno navođenje #header i #navigation selektora, te su stilovi vizualno organizirani i podijeljeni u odgovarajuće sekcije. I sa ugniježđavanjem stilova treba biti oprezan i ne pretjerivati, jer bi u konačnici mogli dobiti pravila koja sadrže preveliki broj nepotrebnih selektora.

 

Podrška za automatsko dopunjavanje i obojena sintaksa u editorima

Ukoliko .less datoteku otvorite u editorima, poput Adobe Dreamweavera ili Notepad++, izgubit ćete podršku za automatsko dopunjavanje i obojenu sintaksu prilikom pisanja CSS stilova. Srećom, to je moguće riješiti. Da bi uključili podršku u Dreamweaveru otvorite datoteku MMDocumentTypes.xml koju možete pronaći na putanji [Putanja_do_DW]AppDreamweaverCS4configurationDocumentTypes i pretražite datoteku za string  id="CSS", te u listu winfileextension dodajte i vrijednost less.

 

 

Za Notepad++ je potrebno da preuzmete XML datoteku i importujete je koristeći Import dugme koje možete pronaći pod Notepad++ -> View -> User-Defined dijalogom.

 

  

 

I za većinu ostalih editora i razvojnih okružena je moguće pronaći dodatke koji uključuju podršku za LESS.

Zaključak

Nekima se koncept LESS-a, tačnije CSS pred-procesora nije dopao, pokušavajući skrenuti pažnju na to da isti pokušavaju popraviti stvar koja nije pokvarena. Neki su LESS nazvali CSS-om na anaboličkim steroidima (što se može shvatiti dvosmisleno), ali pokušajte razmišljati o njemu kao alatu koji vam omogućava da brže obavljate svoj posao.

Ako sa njim zaista brže pišete CSS stilove, i u konačnici pregledniku servirate finalnu CSS datoteku, onda u tome ne bi trebalo biti ništa neprirodno i što bi moglo imati posljedice. Naravno, LESS nije jedini CSS pred-procesor. Izdvojite vremena i dajte šansu i ostalim.