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
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ó.