ݺߣ

ݺߣShare a Scribd company logo

LESS, mint css preprocessor

Levente Kiraly
Levente Kiraly

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

Technology
1 of 36
Downloaded 13 times
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
LESS Király Levente l.kiraly@mito.hu
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.
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)
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ó)
ÁհѰ
Változók Abban az esetben, ha egy változó értékét nem 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álata Vicces, de ennek a neve: normális használat
Változók használata Beágyazás további karakterek közé
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
Űշշ
• összeadhatunk • kivonhatunk • szorozhatunk • oszthatunk
BEÉPÍTETT FÜGGVÉNYEK
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
É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
ѲѷշÉ
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:
MIXINS
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ő
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.
NAMESPACES vagy szebben névterek
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
NESTED RULES avagy egymásba ágyazott szabályok
Nested rules
Nested rules Az előző kód részlet pedig lefordítva
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:
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
GUARDS avagy feltételek
Guards Kimondottan nincsenek less alatt, viszont a mixineknél mégis tudjuk haszná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álata Ennyi 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ítani (windows alá van egy fasza tool, ami js-t használ: https://github.com/duncansmart/less.js-windows)
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/
Hasznos még • lesscss.org • lesselements.com (mixins) • github.com/clearleft/clearless • google.com?q=less+css

More Related Content

Similar to LESS, mint css preprocessor (10)

PDF
Hogy kerül a csizma az asztalra?
Open Academy
KEY
A webes űrlapok csodálatos világa
Szabolcs Bobor
PPT
Újrafelhasználható CSS
cseteroland
KEY
A következő lépés
Anikó Fejes
PPS
CSS előfeldolgozók
Máté Farkas
PPT
HTML
Gábor Debre
KEY
Responsive Webdesign Drupallal
Hajas Tamás
PDF
Laravel for Dummies
Tamás Erdélyi
PDF
Bobor Szabolcs: A webes űrlapok csodálatos világa
Frontend Meetup
PDF
Objektum Orientalt Fejlesztes PHP5-ben
vvinston
Hogy kerül a csizma az asztalra?
Open Academy
A webes űrlapok csodálatos világa
Szabolcs Bobor
Újrafelhasználható CSS
cseteroland
A következő lépés
Anikó Fejes
CSS előfeldolgozók
Máté Farkas
HTML
Gábor Debre
Responsive Webdesign Drupallal
Hajas Tamás
Laravel for Dummies
Tamás Erdélyi
Bobor Szabolcs: A webes űrlapok csodálatos világa
Frontend Meetup
Objektum Orientalt Fejlesztes PHP5-ben
vvinston

LESS, mint css preprocessor

  • 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ó)
  • 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
  • 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
  • 13. • összeadhatunk • kivonhatunk • szorozhatunk • oszthatunk
  • 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
  • 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:
  • 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.
  • 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
  • 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
  • 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
  • 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
About
© 2025 ݺߣ