Többet kevesebbel – LESS.js
Páran úgy gondolom ismeritek már a LESS nevű Ruby gemet. Ez a gem olyan hasznos dolgokkal egészíti ki jelenlegi CSS kódunkat, mint a változók bevezetése, műveletek végzése és egymásba ágyazott, származtatott szabályok. A mai nap átnézzük, hogyan is lehet mindezt JavaScript segítségével megvalósítani.
Mit lessek meg?
Bár egyre szélesebb körben használható már a CSS3 és valóban nagyon hasznos újításokat hoz a fejlesztők számára, sok tekintetben még mindig fejlesztésre szorul. A Leaner CSS ezen a problémán igyekszik segíteni. Mint a bevezetőben is írtam, gyakorlatilag a programozási nyelvekből megszokott módszereket alkalmazza a stíluslapokra is. Ezáltal nyílik lehetőségünk változók használatára vagy leszármazott szabályok létrehozására (mint például az objektumorientált PHP esetében).
A LESS nem túl elterjedt “nyelv”, ugyanis alapvetően a Ruby nyelvhez készült és mi átlag fejlesztők nem fogunk minden egyes apró módosításkor egy új fájlt fordítani. Létezik természetesen PHP-hez és ASP-hez is, de itt megint csak fordítanunk kéne. Hamarosan azonban csak egy böngészőre lesz szükségünk, ugyanis gőzerővel folyik a LESS.js fejlesztése.
Használat
A projekt a GitHub-on található meg, ha regisztrált tagok vagyunk, érdemes követni (Watch ikon). Mivel a LESS.js valóban egy Node.js implementáció, ez az oka annak, hogy ennyi fájl látható. Ez természetesen nem jelenti azt, hogy szükségünk van valamilyen JavaScript keretrendszerre a használatához, a script elfut önmagában is.
A mezei JavaScript fájlokat (melyeknek verziója a cikk írásának időpontjában 1.0.20) a dist/ könyvtárban találjuk, fejlesztői és éles környezetben való használatra egyaránt. Letöltés után a feladatunk csak annyi, hogy elhelyezzük az oldal fejlécébe. Ezután következik az izgalmas rész, a LESS fájl megírása. Nagyon fontos, hogy a .less fájlt a JavaScript előtt hívjuk meg, ugyanis csak így tudja értelmezni! Fontos továbbá, hogy a fájl rel attribútumának beírjuk a
stylesheet/less
értéket. Illetve ahogy látjátok is, a .css kiterjesztés helyett a .less kiterjesztést kell használnunk.
<link href="main.less" type="text/css" rel="stylesheet/less" /> <script src="less-1.0.20.min.js" type="text/javascript"></script>
A cikkhez készítettem egy tipikus weboldalt, fejléc, oldalsávok, tartalom és lábléc elrendezéssel. Mivel a grafikával nem akartam foglalkozni, így ezt CSS3-as lekerítésekkel és színátmenetekkel oldottam meg. Kéretik modern böngészőben nézni az oldalt! :)
Gyakorlati példák
A lényeg tehát jelen esetben a main.less fájlban található, pár dolog amit kiemelnék:
Változók és műveletek
@light-gray: #eee; @dark-gray: @light-gray - #444;
A változókat a @ jellel definiáljuk, az értéket pedig kettőspont után írjuk. A sötétszürke szín megadásánál láthatjátok, hogy a világosszürke szinéből vontam ki a #444444 RGB értéket. Később ezeket az értékeket a @változónév; módon használhatjuk.
Mixin
.rounded-corners {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
Ez a kis kódrészlet arra szolgál, hogy 10 pixellel lekerekített sarkokat ad egy elemnek. A mixinek lényege, hogy ezeket bármikor újra felhasználhatjuk, ha beírjuk az osztály nevét és egy pontosvesszőt.
Egymásba ágyazás
li {
background: #fcf6eb;
color: #64440d;
float: left;
margin: 0 5px 0 0;
padding: 5px 10px;
-webkit-transition: all .3s ease-in;
.rounded-corners;
.inset-shadow;
&:hover {
background: #e8b255;
}
}
Mint látható, a hover állapot esetén nem írtam le újból, hogy li:hover, hanem az aktuális elemet a & karakterrel helyettesítettem. És több mixint is használtam a listaelem formázásakor.
Ami kimaradt
A névtereken, paraméterek átadásán és a scope használatán kívül minden megtalálható a kódban, amire a LESS képes. Természetesen sokkal-sokkal jobb és használhatóbb kódot lehet írni, mint ami az én példámban látható – lévén, hogy még én is csak ismerkedem vele -, de a lényeg szerintem érthető. Létezik még egy Sass néven futó, a LESS-hez nagyon hasonló Ruby gem. Nagyjából ugyanezeket a funkciókat képes ellátni, azonban itt is fordítanunk kell éles környezetben való használat előtt.
Remélem sikerült a cikkel meghoznom a kedveteket, hogy kipróbáljátok ezt a nagyszerű “rendszert”, kiegészítőt, nem is tudom minek nevezzem. Ha ügyfelek weboldalán nem is, de személyes projekteknél szerintem megér egy próbát. Ha Ti is próbáltátok már a cikkben említett Ruby gemeket vagy ezektől eltérőt, vagy csak megosztanád a véleményed a bemutatóval kapcsolatban, örömmel várom a hozzászólásaitokat!
Utószó: a bemutató oldalt idővel bővíteni és szépíteni fogom, jelenlegi célja csak a LESS demonstrálása volt. További információ, hogy most, hogy az iskola végeztével több időm lett, így több cikk is várható a jövőben.
[...] This post was mentioned on Twitter by Rác Erik, Szabolcs Légrádi. Szabolcs Légrádi said: Új bejegyzés a blogon: Többet kevesebbel – LESS.js – http://bit.ly/c3U9Bl [...]
huhh, nagyon érdekes cucc :) majd kipróbálom, bár kétlem, hogy alkalmazni is fogom. azért sok böngészőben tiltva van a javascript, és szeretek js nélkül is élvezhető oldalakat csinálni.
Jó, hogy említetted, ezt kifelejtettem a cikkből. Valóban érdemes egy normál CSS fájlt is készenlétben tartani, de manapság azért már elmondható, hogy a legtöbben bekapcsolt JavaScript-el böngésznek. Aki nem tudja mi az, illetve nem is tud róla egyáltalán, az nem fogja kikapcsolni, aki pedig kikapcsolja, az nyilván tudatosan tette. A Ruby és egyéb nyelveken írt fordítók ilyen szempontból jobbak, mert ott biztos, hogy mindig lefut.
köszi a cikket, nagyon jó! :) érdemes volt felnézni, legközelebbi projektnek ezzel fogok nekifutni.
Ennek őszintén örülök. :) Ha publikus állapotban lesz, majd küldj kérlek egy linket.
:) próbáltam már azóta feltenni a cuccot, de hibaüzit dobott, valamim nincs rendesen bekonfigolva a macin, de majd október után újra teszek egy próbát, viszont nem a js-es verziót használnám, inkább fordíttatni fogom :)
addigis megjelent egy jó kis cikk a LESS-ről:
http://webdesignernotebook.com/css/my-thoughts-on-less/
szintén egy jó cikk :)
http://designshack.co.uk/articles/css/using-less-js-to-simplify-your-css3
Hali. smashingmagazine-on volt nemreg egy cikk valahol a lessjs-rol. Szerintem tok jo dolog (ha jol mukodik, most fogom kiprobalni elesben), mivel, a less-ben valo css fejlesztgetes nagysagrendekkel egyszerubb es jobban kihaszsnalhato mint a sima css (valtozok, mixinek, stb. nem kell magyarazni). Igy szerintem a legjobb megoldas – fejlesztes kozben nyomni a lessjs-t, majd ha elkeszult a mu, akkor a css-be forditott valtozatat belinkelni az oldalba. Ennyi. Amugy jo az oldalad szabolcs, kar hogy nem irogatsz gyakrabban. less-ben mar irogattam egy ideig, ugya a szokasos lessc blah.less –watch -ot futtatva terminal-ban, de ez a kis cucc egy lepest megsporol :) amit mindig szeretek:)
Örülök, hogy van aki próbálja itthon is kihasználni. :) Ha elkészül az éles oldal, szívesen megnézném.
Valóban régen írtam, de már megvan a téma és októberben még igyekszem is megírni. :)