Volite web dizajn?

Zašto ne podijelite svoje znanje s cijelim svijetom? Svatko može pisati za Kroativ i na taj način se promovirati.

Pomoć potrebitima

http://www.hck.hr

Hrvatski Crveni križ

u službi humanosti od 1878.

Less.js – CSS na speedu

Autor/ica Ivan Dorić

Ivan Dorić održava i pravi tutoriale na prvoj hrvatskoj stranici sa video tutorialima iz područja web dizajna – Xtorials.com.

Oglas

Što je Less.js?

Less.js je Javaskripta koja se ponaša kao pred-procesor za CSS dokumente, odnosno dodaje nove mogućnosti vašem CSS dokumentu, kao npr. određivanje varijabli, pravila za nestiranje (ugnježđivanje), mixanje i operacije. Možda vam ovo zvuči malo zbunjujuće ali u sljedećim primjerima ću pokazati kako koristiti Less.js i neke mogućnosti ove skripte.

Ako se pitate kako to da niste prije čuli za LESS, to je najvjerovatnije zato što je prva verzija bila napisana za Ruby On Rails programski jezik, postoji i verzija za PHP ali ju programeri nisu baš toliko dobro prihvatili. Sada je izašla JS verzija koja je kakvih 40 puta brža od prve verzije, i vrlo je jednostavna za implementaciju. Da bi koristili Less.js treba vam samo browser koji podržava JavaScript, što je praktički svaki malo moderniji browser.

Kako pozvati Less.js

Vrlo jednostavno zapravo. Prvo unesite poziv za CSS, vrlo važno je da ovaj poziv bude unesen prije poziva na samu Less.js skriptu:

<link rel="stylesheet/less" href="style.less" />

Primjetite da se dokument koji pozivate ne zove style.css nego style.less, isto tako pod rel trebate dodati stylesheet/less umjesto samo stylesheet.

Nakon toga pozovite Less.js:

<script src="http://lesscss.googlecode.com/files/less-1.0.18.min.js"></script>

Sada ste uspješno pozvali CSS i JS na svoju stranicu, tako da može preći na pisanje samog Less.js koda.

CSS “varijable”

Sljedeće primjere ćemo upisati u datoteku style.less, zato što nam je ona zapravo datoteka koju će Less.js predprocesirati. Ako ste upoznati sa osnovama programiranja, pojam varijable u ovom kontekstu će vam biti vrlo jasan.  Pomoću ove varijable možemo odrediti neko CSS svojstvo, npr. boju koju ćemo kasnije moći primjeniti na bilo koji element u CSS-u. To bi u kodu izgledalo ovako:

@primarna-boja: #cccccc;
@boja-slova: #333333;
 
.omotac{
	background:@primarna-boja;
    color:@boja-slova;
    }

Što se tu dešava? Pa umjesto da na svim mjestima na kojima želimo koristiti sivu boju koristimo #cccccc, možemo umjesto toga jednostavno napisati @primarna-boja ili možemo na svim mjestima gdje želimo definirati da će nam slova biti tamo sive boje jednostavno upisati @boja-slova. Ovo nam može pomoći da definiramo neke vrijednosti koje ćemo često koristiti i da ih nazovemo nekim nama lako razumljivim pojmovima.

CSS “funkcije”

CSS funkcije ili mix-ins, rade slično kao i funkcije u programiranju, pomoću njih isto određujemo skup nekih CSS vrijednosti i svojstava ali ih ovaj puta možemo mjenjati ovisno o elementu, kao u primjeru ispod:

.zaobljeni-rubovi(@radius: 5px) {  
   -moz-border-radius: @radius;  
   -webkit-border-radius: @radius;  
   border-radius: @radius; 
   }

Kada smo ovo upisali odredili smo da nam zaobljeni rubovi budu 5px, ali ne želimo da tako bude za svaki element koji koristi klasu .zaobljeni-rubovi. Recimo da želimo da div koji ima klasu .omotac ima zaobljene rubove od 10px. Za to ne moramo napraviti novu klasu, nego možemo jednostavno napisati sljedeći kod:

.omotac{
	.zaobljeni-rubovi(10px);
}

U ovom slučaju će biti iskorištena klasa koja već postoji, ali će joj se promjeniti veličina zaobljenih rubova, to smo definirali tako da smo u zagradu kraj imena klase stavili vrijednost koju želimo koristiti. Primjetite da smo ovdje došli do još jedne mogućnosti Less.js skripte, a to je….

…Ugnježđivanje (nesting)

a to znači da unutar jedne klase ili selektora možemo koristiti pozive ne neke klase kao u prethodnom primjeru ili čak možemo pozivati tagove koji se nalaze unutar nekih elemenata. Kao primjer možemo navesti a tag koji služi za stvaranje linkova. Recimo da želimo definirati boju linkova koji će se koristiti unutar elementa koji ima klasu .omotac,  u klasičnom CSS-u bi to napisali ovako:

.omotac a{ color:#FF0000;}

dok koristeći Less.js to možemo napisati ovako:

.omotac { 
 
	a{color:#FF0000;}
 
    }

Nije značajna promjena u kodu, nije čak ni skraćeni kod, ali na ovaj način možete lagano povezivati i pregledavati svoj CSS kod, zato što će se sve nalaziti unutar jednog selektora i cijeli kod će biti puno pregledniji.

Na kraju pogledajmo kako će ovaj naš primjer izgledati u cijelosti:

/* definiramo varijable */
 
@primarna-boja: #cccccc;
@boja-slova: #333333;
 
/* definiramo funkcije (mix-ins) */
 
.zaobljeni-rubovi(@radius: 5px) {  
   -moz-border-radius: @radius;  
   -webkit-border-radius: @radius;  
   border-radius: @radius; 
   }
 
 
/* i sada to sve lijepo primjenimo na naš element .omotac */
 
.omotac {
    background:@primarna-boja;
    color:@boja-slova;
 
    .zaobljeni-rubovi(10px);
 
	a{
    color:#FF0000;
    }
 }

Eto, ovo je kratki uvod u Less.js. Jedini problem kod ovakvog pristupa pisanja CSS-a je to da ako korisnik nema uključen JavaScript, stranica će mu se pokazivati bez CSS-a, što može biti poprilično ružno, naravno u tom slučaju možemo imati nekakav fallback CSS, slično kao za hackove za Internet Explorer. Less.js je još uvjek u fazi razvoja, ali koliko sam ga isprobao i sad radi poprilično dobro i može dosta olakšati i ubrzati proces pisanja CSS-a.

Ako želite saznati nešto više o Less.js skripti pratite sljedeće linkove:

NetTuts (ovdje imate i kratak video u kojem Jeffery Way opisuje korištenje Less.js-a)

Fadeyev.net (malo više informacija o Less.js od čovjeka koji ga je pomogao napisati)

Lesscss.org

Označeno s: , ,
Za ovaj članak možete glasati na CroPortalu i tako pomoći u njegovoj promociji. Ako članak još nije objavljen vi možete biti prvi!
Stavovi i mišljenja izrečena u ovome članku i/ili komentarima odnose se samo na autora/icu članka i/ili komentara, a ne i cijele Kroativ mreže. Zabranjeno je neovlašteno prenošenje članaka u cjelosti bez prethodnog dogovora ili bez istaknutog povratnog linka na www.kroativ.net stranicu te imena autora.
Oglas

4 komentara

  • Alen kaže:

    Hmm, moram priznati da bi moglo biti korisno … Npr. “css varijable” – ako umjesto #ffcc00 napravim ultrakratko npr.- @b skraćuje tipkanje … A pogotovo skraćuje sa zaobljenim rubovima … A kakva je crossborwser podrška ? (ako zanemarimo da neki nadobudni isključuju javascript podršku u svojim browserima … 😉 )

  • Ivan Dorić kaže:

    @Alen

    pa podrška je dobra, podržani su svi moderni browseri + IE6 za manje verzije nisam siguran. Što se tiče JS-a, tu nažalost nema pomoći.

    Pozdrav

  • Amra kaže:

    Korisno… hvala!

  • Ante Primorac kaže:

    dosta korisna stvar, a što se tiče tih što gase javascript nema od njih kruha

Trackbacks & Pingbacks

Ostavite komentar

Autori s više od 10 komentara nemaju tag nofollow na svojim linkovima! Zabranjeno je vrijeđanje, omalovažavanje ili na bilo koji drugi način ometanje normalnog toka komentara. Također je zabranjeno oglašavanje u komentarima i sve druge vrste spam-a.

(*) polja su obavezna

XHTML: Možete koristiti: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">