11. Less nyelv használata a css3-hoz

A hét végén a Drupal konferencián a less nyelv szépségeit ecsetelték, ezért megnéztem, hogy mire jó és hogyan működik.

A nyelv célja:

  • CSS fájlok tartalmának automatikus, programozható megadása.

Miért van rá szükség?

A designerek gyakran olyan designt készítenek, amely több helyen is tartalmazhat színdefiníciókat, illetve ismétlődő formára vonatkozó utasításokat. Ha a css fájl bonyolult, ismétlődések vannak benne, esetleg több css fájl van, akkor jöhet a less. A css fájlokkal az a probléma, hogyha egy értéket több helyen be kell írni, akkor nincs mese, annyiszor be kell írni.

Hogyan működik a less nyelv

A *.less fájl hasonlít egy css fájlhoz, de vannak benne változónevek és a hozzájuk tartozó értékek.  A less fájl segítségével css fájlt írunk le, amelynek egyes értékeit a less változóival határozunk meg.

A *.less fájlt értelmezni kell.

Az értelmezés lehet szerver oldali php-val és lehet kliens oldali, javascripttel.

Ha a szerver oldalon értelmezzük, akkor a fejlesztés során megírt less kódra lefuttatjuk a less compilert, ami előállítja a szerver oldalon a css kódot, majd a kliens már ezt a kódot tölti le a böngészőbe. Ez a fejlesztéskor könnyen beépíthető egy php projektbe. A szerver oldalon ellenőrizni lehet a css fájl és a less fájl utolsó módosítását, így csak akkor jön létre új css fájl, ha módosult a less fájl.

A javascript megoldás magát a less fájlt húzza át a böngészőbe, ott fut le a fordítás és az így előálló formátum lesz az oldal stíluslapja.

Mikor lehet rá szükség?

Ha a designer gyakran vált designt-t, ha sok helyen definiálom ugyanazokat az értékeket. Ha a színek és egyéb értékek megadásánál ugyanazokat az értékeket kell használnom több helyen.

Nem lassítja a program futását?

Ha a szerver oldali megoldást választom, akkor az első futáskor lefordítja a megfelelő compiler a css fájlt és az úgy marad, tehát nincsen késlekedés. A javascript megoldás kicsit lassabb lesz.

Honnan tölthetem le és honnan érhetem elő

A nyelv leírása és a javascript compiler letöltése: http://lesscss.org/

A PHP compiler működése, a nyelvl: http://leafo.net/lessphp/docs/

A PHP compiler letöltése: https://github.com/leafo/lessphp

Az első projektem elkészült benne smiley

A sass nyelv hasonlít a less-hez. A Ruby rendszerében vezették be és használják.

Ez is egy programozási nyelv változókkal. Ha feltelepítünk egy Ruby-t egy PC-re vagy Linux fejlesztői gépre és egy Drupal 7 ZEN témát szerkesztünk, akkor érdemes a sass-használni: scss fájlokat szerkeszteni.

A Scout App egy egyszerűen használható projekt alapú SASS fordító. Letölthető: https://scout-app.io/ Nem kell különösebben konfigurálni. Telepítés után elindítjuk, létrehozunk egy projektet és ha egy projektet aktív állapotba állítunk, akkor figyeli a megadott könyvtárstruktúrát és automatikusan előállítja a SASS file-okból a CSS kódot.

Ha a saját ZEN smink gyökerében elindítjuk a compass watch parancsot, akkor figyeli a sass fájlok állapotát és ha módosítom őket, akkor legyártja a megfelelő css fájlokat belőlük. Fejlesztéskor nagyon jól használható.