LESS, mint css preprocessor

LESS

Király Levente

[email protected]

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