LESS, mint css preprocessor

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

Transcript

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 Bővebben: http://lesscss.org/#-color-functions Tartalmaz jó pár beépített függvényt, javarészt színnel kapcsolatosak Ezeket csak nagyvonalakban említeném meg.
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 silent comment. Fordítás után nem jelenik meg a kimeneti fájlban. Pl: multi line comment: akárcsak jelenleg. Pl:
19. MIXINS
20. Mixins • paraméter nélküli • paraméterrel rendelkező 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.
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 ha a fentebb írt mixint szeretnéd beágyazni valahova, az alábbi formában teheted meg 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.
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