LESS Király Leventel.kiraly@mito.hu
Mi a LESS?Egy css preprocessor (szebben: előfeldolgozó), amelykiegészíti a css-t.• kapunk változókat (most már ugyan jött ...
Előnyei• gyors fejlesztés (nested rules)• objektum orientált fejlesztési szemlélet• átláthatóbb kód (ez hülyeség, fejleszt...
Hátrányai• mindenképpen fordítani kell a kódot ez  történhet kliens oldalon(js), szerver  oldalon (jelen esetben php), vag...
VÁLTOZÓK
VáltozókAbban az esetben, ha egy változó értékétnem definiálod, üres lesz a property értéke.
Globális változóBárhol tudsz rá hivatkozni a forráskódban
Scoped /privát/ változócsak az adott ruleon belül éred el
Változók használataVicces, de ennek a neve: normális használat
Változók használataBeágyazás további karakterek közé
Escapelésleginkább ms specifikus rule-oknál fogunkvele találkozni.fordítás után természetesen nem maradnak ott az extra ka...
MŰVELETEK
•   összeadhatunk•   kivonhatunk•   szorozhatunk•   oszthatunk
BEÉPÍTETTFÜGGVÉNYEK
Műveletek színekkelTartalmaz jó pár beépített függvényt, javarészt színnel kapcsolatosakEzeket csak nagyvonalakban említen...
Értékek lekérdezése• Lekérdezhetjük a színek bizonyos értékeit  hue(@color);  saturation(@color);  lightness(@color);  alp...
KOMMENTELÉS
Kétsingle line: másképpen   multi line comment:silent comment.          akárcsak jelenleg.Fordítás után nem        Pl:jele...
MIXINS
Mixinsleginkább a classokra hasonlítanak, pontosabban úgy is viselkednek, csak itt adott alehetőség, hogy felparaméterezd ...
Mixins• előre megadott paraméter• ami még fasza  röviden ez annyi, hogy a megadott paraméterekre hivatkozhatsz  egy @argum...
NAMESPACESvagy szebben névterek
Namespacesitt jön képbe az oop. lessben könnyen csoportosíthatod a kódodat,modulokat alkothatsz belőlük, amikre más ruleok...
NESTED RULESavagy egymásba ágyazott szabályok
Nested rules
Nested rulesAz előző kód részlet pedig lefordítva
Nested rulesha az adott rulehoz szeretnél hozzávűzni,például egy .active classt, akkor az alábbimódon teheted meg:
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...
GUARDSavagy feltételek
GuardsKimondottan nincsenek less alatt, viszont a mixineknél mégis tudjukhasználni. Eléggé értelmetlen, ugye?
További feltételek•   iscolor•   isnumber•   isstring•   iskeyword•   isurl•   ispixel•   ispercentage•   isem
TELEPÍTÉS /HASZNÁLATA
Kliens oldali használataEnnyi lenne:
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...
GUIk• Window    • WinLess: http://winless.org/(itt tudsz online is kódot      fordítani)    • Crunch!: http://crunchapp.ne...
Hasznos még•   lesscss.org•   lesselements.com (mixins)•   github.com/clearleft/clearless•   google.com?q=less+css
Upcoming SlideShare
Loading in …5
×

LESS, mint css preprocessor

1,188 views

Published on

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,188
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
13
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

LESS, mint css preprocessor

  1. 1. LESS Király Leventel.kiraly@mito.hu
  2. 2. Mi a LESS?Egy css preprocessor (szebben: előfeldolgozó), amelykiegé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. 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. 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. 5. VÁLTOZÓK
  6. 6. VáltozókAbban az esetben, ha egy változó értékétnem definiálod, üres lesz a property értéke.
  7. 7. Globális változóBárhol tudsz rá hivatkozni a forráskódban
  8. 8. Scoped /privát/ változócsak az adott ruleon belül éred el
  9. 9. Változók használataVicces, de ennek a neve: normális használat
  10. 10. Változók használataBeágyazás további karakterek közé
  11. 11. Escapelésleginkább ms specifikus rule-oknál fogunkvele találkozni.fordítás után természetesen nem maradnak ott az extra karakterek
  12. 12. MŰVELETEK
  13. 13. • összeadhatunk• kivonhatunk• szorozhatunk• oszthatunk
  14. 14. BEÉPÍTETTFÜGGVÉNYEK
  15. 15. Műveletek színekkelTartalmaz jó pár beépített függvényt, javarészt színnel kapcsolatosakEzeket csak nagyvonalakban említeném meg.Bővebben: http://lesscss.org/#-color-functions
  16. 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. 17. KOMMENTELÉS
  18. 18. Kétsingle line: másképpen multi line comment:silent comment. akárcsak jelenleg.Fordítás után nem Pl:jelenik meg a kimenetifájlban.Pl:
  19. 19. MIXINS
  20. 20. Mixinsleginkább a classokra hasonlítanak, pontosabban úgy is viselkednek, csak itt adott alehetőség, hogy felparaméterezd őket, illetve fordítás után nem jelennek meg.• paraméter nélküli• paraméterrel rendelkező
  21. 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. 22. NAMESPACESvagy szebben névterek
  23. 23. Namespacesitt 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ábbiformában teheted meg
  24. 24. NESTED RULESavagy egymásba ágyazott szabályok
  25. 25. Nested rules
  26. 26. Nested rulesAz előző kód részlet pedig lefordítva
  27. 27. Nested rulesha az adott rulehoz szeretnél hozzávűzni,például egy .active classt, akkor az alábbimódon teheted meg:
  28. 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. 29. GUARDSavagy feltételek
  30. 30. GuardsKimondottan nincsenek less alatt, viszont a mixineknél mégis tudjukhasználni. Eléggé értelmetlen, ugye?
  31. 31. További feltételek• iscolor• isnumber• isstring• iskeyword• isurl• ispixel• ispercentage• isem
  32. 32. TELEPÍTÉS /HASZNÁLATA
  33. 33. Kliens oldali használataEnnyi lenne:
  34. 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. 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. 36. Hasznos még• lesscss.org• lesselements.com (mixins)• github.com/clearleft/clearless• google.com?q=less+css

×