LESS, mint css preprocessor. Röviden az előnyeiről, képességeiről és használatáról.

1. LESS
Király Levente
l.kiraly@mito.hu

2. Mi a LESS?
Egy css preprocessor (szebben: előfeldolgozó), amely
kiegészíti a css-t.
• kapunk változókat (most már ugyan jött az ötlet, hogy
legyenek natív változók (http://dev.w3.org/csswg/css-
variables/) a cssben, de az még csak draft [chrome dev
buildbe már implementálták])
• műveleteket tudunk végezni cssen belül (igen, most már
ez is van a css-ben, calc(http://www.w3.org/TR/css3-
values/#calc) néven fut)
• beépített függvényeket
• mixineket (többször felhasználható valamik), igazából
classnak felel meg a legjobban.

3. Előnyei
• gyors fejlesztés (nested rules)
• objektum orientált fejlesztési szemlélet
• átláthatóbb kód (ez hülyeség, fejlesztőn múlik)

4. Hátrányai
• mindenképpen fordítani kell a kódot ez
történhet kliens oldalon(js), szerver
oldalon (jelen esetben php), vagy
fejlesztés után egyből
• annyira nem okos, mint társa, a sass
(bizonyos műveleteknél elhasal)
• ha nem ért hozzá valaki, nem nagyon fogja
tudni bővíteni a kódot (na jó, de, mivel tök
egyszerű, könnyen átlátható)

5. VÁLTOZÓK

6. Változók
Abban az esetben, ha egy változó értékét
nem definiálod, üres lesz a property értéke.

7. Globális változó
Bárhol tudsz rá hivatkozni a forráskódban

8. Scoped /privát/ változó
csak az adott ruleon belül éred el

9. Változók használata
Vicces, de ennek a neve: normális használat

10. Változók használata
Beágyazás további karakterek közé

11. Escapelés
leginkább ms specifikus rule-oknál fogunk
vele találkozni.
fordítás után természetesen nem maradnak ott az extra karakterek

12. MŰVELETEK

13. • összeadhatunk
• kivonhatunk
• szorozhatunk
• oszthatunk

14. BEÉPÍTETT
FÜGGVÉNYEK

15. Műveletek színekkel
Tartalmaz jó pár beépített függvényt, javarészt színnel kapcsolatosak
Ezeket csak nagyvonalakban említeném meg.
Bővebben: http://lesscss.org/#-color-functions

16. Értékek lekérdezése
• Lekérdezhetjük a színek bizonyos értékeit
hue(@color);
saturation(@color);
lightness(@color);
alpha(@color);
• Kerekíthetünk felfelé és lefelé
round(1.67); // returns `2`
ceil(2.4); // returns `3`
floor(2.6); // returns `2`
• és százalékká alakíthatunk
percentage(0.5); // 50%
• JavaScriptes függvényeket is tudsz használni, ha kliens
oldali less-t használsz.
Bővebben: http://lesscss.org/#-javascript-evaluation

17. KOMMENTELÉS

18. Két
single line: másképpen multi line comment:
silent comment. akárcsak jelenleg.
Fordítás után nem Pl:
jelenik meg a kimeneti
fájlban.
Pl:

19. MIXINS

20. Mixins
leginkább a classokra hasonlítanak, pontosabban úgy is viselkednek, csak itt adott a
lehetőség, hogy felparaméterezd őket, illetve fordítás után nem jelennek meg.
• paraméter nélküli
• paraméterrel rendelkező

21. Mixins
• előre megadott paraméter
• ami még fasza
röviden ez annyi, hogy a megadott paraméterekre hivatkozhatsz
egy @arguments változóval is, így nem kell leírni az összes
paramétert.

22. NAMESPACES
vagy szebben névterek

23. Namespaces
itt jön képbe az oop. lessben könnyen csoportosíthatod a kódodat,
modulokat alkothatsz belőlük, amikre más ruleokon belül tudsz hivatkozni.
ha a fentebb írt mixint szeretnéd beágyazni valahova, az alábbi
formában teheted meg

24. NESTED RULES
avagy egymásba ágyazott szabályok

25. Nested rules

26. Nested rules
Az előző kód részlet pedig lefordítva

27. Nested rules
ha az adott rulehoz szeretnél hozzávűzni,
például egy .active classt, akkor az alábbi
módon teheted meg:

28. Import
• tudunk benne importálni is,
hasonlóképpen, mint alapból css-ben, csak
itt annyi különbséggel, hogy fordítás után
berántja az adott sheetbe az importált fájl
tartalmát

29. GUARDS
avagy feltételek

30. Guards
Kimondottan nincsenek less alatt, viszont a mixineknél mégis tudjuk
használni. Eléggé értelmetlen, ugye?

31. További feltételek
• iscolor
• isnumber
• isstring
• iskeyword
• isurl
• ispixel
• ispercentage
• isem

32. TELEPÍTÉS /
HASZNÁLATA

33. Kliens oldali használata
Ennyi lenne:

34. Szerver oldali használat
• php, ruby, node.js, szinte minden nyelven
lehetséges a fordítás
• cli segítségével is tudsz fordítani
(windows alá van egy fasza tool, ami js-t
használ: https://github.com/duncansmart/less.js-windows)

35. GUIk
• Window
• WinLess: http://winless.org/(itt tudsz online is kódot
fordítani)
• Crunch!: http://crunchapp.net/ (adobe air alkalmazás)
• simpless: http://wearekiss.com/simpless
• OSX
• less.app: http://incident57.com/less/
• simpless: http://wearekiss.com/simpless
• LiveReload http://livereload.com/

36. Hasznos még
• lesscss.org
• lesselements.com (mixins)
• github.com/clearleft/clearless
• google.com?q=less+css