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.