less, mint css preprocessor
DESCRIPTION
LESS, mint css preprocessor. Röviden az előnyeiről, képességeiről és használatáról.TRANSCRIPT
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
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
MŰVELETEK
• összeadhatunk
• kivonhatunk
• szorozhatunk
• oszthatunk
BEÉPÍTETT FÜGGVÉNYEK
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.
É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
KOMMENTELÉS
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:
MIXINS
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.
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
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.
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