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 ¨C 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 ¨C 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 & ¨C 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 ¨C 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 ¨C +, -, *, /
funkcije za rad s bojama ¨C ligh te n /d arke n ,
satu rate /d e satu rate , fad e in /fad e o u t, sp in
HSL funkcije ¨C h u e , satu ratio n , ligh tn e ss , alp h a
matematika ¨C 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
16. Ostalo
komentari ¨C // komentar je napokon ispravan
import ¨C @ 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 !
