• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
LESS, mint css preprocessor
 

LESS, mint css preprocessor

on

  • 710 views

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

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

Statistics

Views

Total Views
710
Views on SlideShare
707
Embed Views
3

Actions

Likes
0
Downloads
10
Comments
0

1 Embed 3

https://twitter.com 3

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    LESS, mint css preprocessor LESS, mint css preprocessor Presentation Transcript

    • 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 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ó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 karakterek
    • 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é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
    • KOMMENTELÉS
    • 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:
    • MIXINS
    • 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ő
    • 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.
    • 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 ruleokon belül tudsz hivatkozni.ha a fentebb írt mixint szeretnéd beágyazni valahova, az alábbiformában teheted meg
    • 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 berántja az adott sheetbe az importált fájl tartalmát
    • 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í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