Možda do sada niste čuli za LESS, a verovatno pretpostavljate da ima neke veze sa CSS-om i stilizovanjem web sajtova. LESS nije toliko poznat i većina ljudi ne zna šta je on ustvari i zašto je toliko poseban da je čak dobio svoje ime.
Za razliku od CSS-a, LESS je open source dinamički jezik za opis stilova sa prvom verzijom pisanom u Ruby programskom jeziku, ali je zamenjen sa JavaScript-om kasnije.
LESS je složeniji nego CSS, pruža varijable, ugnežđivanje, mixins (klase za višekratnu upotrebu), operatore i funkcije i kompilaciju u realnom vremenu preko LESS.js od strane browser-a koji se koristi. LESS može da radi i na klijentskoj i serverskoj strani i može biti čak kompajliran u normalnan, običan CSS.
LESS omogućava pisanje CSS-a na više programerski način u odnosu na statički, kao što je podrazumevano. Ovo znači da je njegova upotreba komplikovanija od upotrebe običnog CSS-a, zbog toga što je izgrađen na JavaScript-u, a ukoliko ste upoznati sa ovom tehnologijom lako ćete se snaći.
Činjenica da imate na raspolaganju sve varijable i operacije će vam pomoći da napravite kod više dinamičnim. Jedna od prednosti koje nudi LESS je ugneždjivanje.
Na primer u CSS-u obično pišemo svako pravilo odvojeno, jedno iza drugog, što dovodi do ponavljanja iste stvari više puta. Stilizovanje navigacije je odličan primer, gde imamo header, zatim nav, nav ul i nav ul li i nav ul li a. U LESS-u ovo možete ugnezditi da izgleda ovako:
[css]
#header {
#nav {
ul {
li {
a { }
}
}
}
}
[/css]
Na ovaj način kod je jednostavniji, efektivniji, lakši za snalaženje, nema bespotrebnog ponavljanja selektora, ugnežđivanjem selektora možete predstaviti hijerarhiju na bolji način.
Još jedna od dobrih opcija LESS-a je lako upravljanje bojama u okviru web sajta. Na primer ako imate sajt koji koristi minimum 3 boje i želite da uradite neku promenu boje, morali bi da pretražujete kroz 600 linija dugačak CSS.
LESS rešava ovaj problem dozvoljavajući dizajnerima da koriste varijable. Možete dodati boju određenoj varijabli, na primer @main-color: #222222; i onda pozvati varijablu gde god želite: #header {background-color: @main-color;}
Da li ste ikada razmišljali koliko linija koda pišete, na primer da bi definisali zaobljene ivice? To izgleda ovako:
[css]
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
[/css]
U LESS-u ovaj kod može biti pojednostavljen upotrebom mixins. Prvo napišemo originalni mixin i dodamo varijablu sa kojom želimo manipulisati:
[css]
.border-corners(@radius: 10px) {
border-radius: @radius;
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
}
[/css]
Sada, ako želite da header ima border radius 5px, možemo uraditi sledeće:
[css]
#header {
.border-corners(5px);
}
[/css]
Kao što vidite, sve pojednostavljeno. To je osnovna zamisao LESS-a, uraditi sve na lakši i brži način.
Ovo su samo neki primeri mogućnosti LESS-a, ali on ima veliki broj mogućih kombinacija koje možete koristiti između varijabli, operacija, mixins itd.
Zaključak
Kada dizajnirate jednostavnu stranicu sa tri paragrafa teksta, CSS je više nego dovoljan. Međutim, kada stvari postanu malo komplikovanije i treba da napišete hiljade linija koda, pre-procesori kao što je LESS mogu vam mnogo olakšati posao.
Imajte na umu da je LESS izgrađen na JavaSrcipt-u i kompiluje se uživo, tako da stariji browser-i mogu biti usporeni pri njegovom izvršavanju. Na novijim verzijama ne bi trebalo biti problema, ali razmislite ko je vaša ciljana publika koja će posećivati vaš sajt.
Ako vam je CSS i suviše jednostavan i želite malo više dinamičko stilizovanje, LESS je jedna od opcija. Drugo rešenje je Sass koje ima svoje prednosti, ali LESS je dobar za početak, pošto radi na istoj strukturi kao CSS, pa može biti jednostavniji za učenje.
