1. L E S S IS MO R E
Neven Falica
Element d.o.o.
@elkarrde
User-experience
JavaScript, CoffeeScript; KnockoutJS
HTML5, CSS3, LESS
PHP, Scala

2. Što je L E S S ?
http://lesscss.org
LESS je proširenje CSSa
LESS je JavaScript preprocessor

3. Koje probleme rje š ava
LESS?
korištenje varijabli unutar CSSa @ b ase Co lo r: #066AF8;
operatori p ad d in g: 2 * @ wid th ;
hijerarhijska organizacija klasa h 1 {sm all { … }}
mixini – lblokovi, funkcije .re d {co lo r: #F40;}
funkcije b ackgro u n d : fad e o u t(50% );
importovi, komentari…

4. Va rija ble
Rade kao konstante – jednom definirane, nije ih
moguće mijenjati, mogu biti i stringovi

5. Va rija ble
CSS:
#h e ad e r { b ackgro u n d : #FE451 0; }
#fo o te r { b o rd e r-to p : 1 p x d o tte d #FE451 0; }
th {
b o rd e r-b o tto m : 2p x so lid #FE451 0;
co lo r: #FE451 0;
}

6. Va rija ble
CSS:
#m ain { b ackgro u n d :
u rl('../im g/te xtu re s/d ark_n o ise .p n g'); }
#fo o te r { b ackgro u n d :
u rl('../im g/te xtu re s/ligh t.p n g'); }
.ico n { b ackgro u n d -im age :
u rl('../im g/ico n s/sp rite -actio n s.p n g'); }
.sh are -ico n { b ackgro u n d -im age :
u rl('../im g/ico n s/sp rite -sh are .p n g'); }

7. U gnje žđ ivanje
aka “nesting”, ugnježđivanje CSS selektora
struktura selektora prati strukturu DOM stabla
veća preglednost koda
operator & – radi kao th is u drugim programskim
jezicima

8. Ugnježđivanje
CSS:
#h e ad e r { co lo r: #000; }
#h e ad e r h 1 { fo n t-size : 3.5e m ; }
#h e ad e r h 1 sm all { fo n t-size : 1 .5e m ; }
#fo o te r .sh are { p ad d in g: 8p x; }
#fo o te r .sh are .ico n { m argin -le ft: 1 0p x; }
LESS:
#h e ad e r {

9. Ugnježđivanje
CSS: LESS:
#re p o rt tab le a { co lo r: #re p o rt tab le {
#999; } a{
#re p o rt tab le a:h o ve r { co lo r: #999;
co lo r: #000; &:h o ve r {
b ackgro u n d : #EEE; co lo r: #000;
} b ackgro u n d : #EEE;
#re p o rt tab le a:active { }
p o sitio n : re lative ; &:active {

10. Mixini
logički blokovi koda
mogu primati parametre – funkcije
#h e ad e r a {
.b oxe d {
co lo r: #000;
b ackgro u n d : #EEE;
b ackgro u n d : #EEE;
b o rd e r: 1 p x so lid #000; b o rd e r: 1 p x so lid
p ad d in g: 0.5e m ; #000;
}
p ad d in g: 0.5e m ;
}

11. Mixini
.b o rd e r-rad iu s(@ rad iu s) {
b o rd e r-rad iu s: @ rad iu s;
-m o z-b o rd e r-rad iu s: @ rad iu s;
-we b kit-b o rd e r-rad iu s: @ rad iu s;
}
.b ox-sh ad o w() {
b ox-sh ad o w: @ argu m e n ts;
-m o z-b ox-sh ad o w: @ argu m e n ts;
-we b kit-b ox-sh ad o w: @ argu m e n ts;

12. Mixini
.b ack(@ im age , @ re p e at: re p e at, @ p o s: le ft to p ) wh e n (isstrin g(@ im age )) {
.b ackim age ('@ {im age }', @ re p e at, @ p o s);
}
.b ack(@ co lo r1 , @ co lo r2) wh e n (isco lo r(@ co lo r1 )) an d (isco lo r(@ co lo r2)) {
#grad ie n t.ve rtical(@ co lo r1 , @ co lo r2);
}
.b ack(@ co lo r) wh e n (isco lo r(@ co lo r)) {
b ackgro u n d -co lo r: @ co lo r;
}

13. Funkcije
osnovni operatori – +, -, *, /
funkcije za rad s bojama – ligh te n /d arke n ,
satu rate /d e satu rate , fad e in /fad e o u t, sp in
HSL funkcije – h u e , satu ratio n , ligh tn e ss , alp h a
matematika – ro u n d , ce il, flo o r, p e rce n tage

14. Funkcije
@ co lo r: #D 1 0 + #333; // #F43
@ b ase : 5% ;
@ fille r: @ b ase * 2; // 1 0%
@ wid th : 7p x;
b o rd e r: (@ wid th * 2) so lid (#D 1 0 - #333) // 1 4p x
so lid #A00
@ gray: #AAA;
ligh e n (@ gray, 1 0% ); // #C3C3C3

15. Ostalo
Kompajleri
SimpLESS – http://wearekiss.com/simpless
WinLess – http://winless.org/
lessphp – http://leafo.net/lessphp/
Node.js
Rhino
Twitter Bootstrap

16. Ostalo
komentari – // komentar je napokon ispravan
import – @ im p o rt radi kao re q u ire u PHPu
JavaScript
@ var: ` "h e llo ".to U p p e rCase () + '!'` ; // H ELLO !