A CSS egy igazán praktikus dolog, annál voltaképpen csak a LESS praktikusabb. Amennyire néztem, a front-end fejlesztők körében kicsit megoszlik a vélemény, vannak, akik imádják és vannak, akik szerint nem szabadna ilyesmit használni. No de mi is az a LESS? Gyakorlatilag a CSS újraértelmezése: az alapok maradnak, azonban új szabályok, új megoldási módok, új funkciók vehetők igénybe, mint például a változók vagy mondjuk a függvények.
Az általunk írt LESS fájlból kétféleképpen lehet a böngésző által is értelmezhető CSS-t varázsolni: az egyik megoldás a LESS kliens-oldali Javascript alkalmazásának betöltése, amely on-the-fly készíti el a CSS-t. Ennek hátránya, hogy a böngészőben Javascript nélkül nem jelenik majd meg a dizájn, amelyet a CSS-ben definiálunk, azonban erre vannak természetesen kerülőmegoldások (illetve könyörgök, 2011 van, még a legegyszerűbb mobilböngészők is tudnak már Javascriptet értelmezni). A másik megoldás a LESS szerver-oldali alkalmazása, amely egyszerűen generál egy CSS-t a bemenő LESS-fájlból. Mindkét változat előnye, hogy akár mezei CSS-fájlokkal is használhatjuk, így is kijelzi ha szintaktikai hibát vétünk valahol. Ez például egy lemaradó pontosvessző vagy kötőjel, egy elgépelt betű stb. esetén hasznos lehet.
A változók hasznosak lehetnek alapszínek megadására, amelyek később változhatnak. Persze, ugyanúgy fél másodperc kicserélni egy IDE segítségével, de ettől függetlenül hasznos lehet. A függvények kényelmesek például lekerekített téglalapok készítéséhez, valamint a számomra leghasznosabbnak tűnő funkció a nested megvalósítás, vagyis egy blokkon belül akár több blokkot is definiálhatunk, végtelen szintig.
Akik felvágással (szájtbilddel) foglalkoznak, érdemes vetni rá egy pillantást, sokkal gyorsabban, kisebb méretű kódot előállítva lehet CSS-t fejleszteni ennek a remek kiegészítőnek a segítségével.
Tetszett a bejegyzés?
Megköszönöm, ha nyomsz rá egy like-ot vagy megosztod másokkal:
saxus
2011. június 11. — 20:34:41
Hehe, ennek – vagy valami hasonló – használatán még anno gondolkoztam is, csak szerintem sejted, hogy milyen visszhangja lett volna a designért felelős körökben… 🙂
firith
2011. június 11. — 21:46:09
én szeretem, eddig egy nagyobb projectben használtam, igen kényelmes. Én fejlesztés közben parancssorból “fordítok”, de pl textmate minden mentéskor megteszi
Andrei
2011. június 12. — 07:04:28
Jónak tűnik. Amúgy meg legrosszabb esetre írsz egy no script CSS-t, amit felülírsz js-ből, aztán jónapot. Viszont elgondolkoztató, hogy mennyi szkriptet behúzunk már a fejlesztői oldal kényelme miatt. jquery, less, stb. És akkor még ott vannak a keretrendszerek a templatekre (én spec most smarty-val kell játsszak), stb. Ha csak 5 évet visszamegyek az időben, akkor ég és föld.
A link lemaradt, de: http://lesscss.org/
[re=6064594]saxus[/re]: szerintem közös projektnél még a designerek is bírnak alkalmazkodni, ha pénzt kapnak a melóért 🙂
saxus
2011. június 12. — 17:30:36
[re=6064597]Andrei[/re]: nah, nalunk nem sikerult meghonositani egy ilyen aprosagot, mint az SVN. Merthogy erre nekik nincs idejuk, meg nem kell nekik meg kulonben is, odaadjak a HTML-CSS-t, utana nekik nincs dolguk vele (de) es ugy amugy is, eddig sehol nem kellett. (Aztan most, hogy allasinterjun volt, egybol kerdeztek tole 🙂
Fejlesztoi kenyelem: nah, valahol ez is kezd atesni a lo tuloldalara. jQueryvel el is vitaztunk parszor mefivel (pl. mikor az o jQuerys scriptjenel hisztizett a Firebug es emiatt nem futott az enyim 😉 de alapvetoen azert nem teljesen haszontalan. Csak azert szvsz neha ra lehetne szanni azt az idot, hogy az a nehany dolog miatt, amit – bar meg lehet irni uberaltalanosra jQueryvel, soha az eletben senki nem fog atmasolni egyben mashova – kb. 2x annyiban meg lehet irni kezzel is oda (ersd: 5 sor helyett 10 es egy sor modositasaval az is portolhato), cserebe nem kell mindig berantani a jQueryt.
Less-t meg kliensoldalra berakni sztem inkabb hanyagsag. Felesleges adatforgalom es fogosleges lassitas. Szerver oldalra vele.
Smartynak meg a letet nem ertem. PHP-t ugyanerre talaltak ki.
Viszont a keretrendszerek egeszen mas celra vannak. Azert azok nem ritkan gyorsitanak a fejlesztesen. Mondjuk ott is szeretnek a fejlesztok neha atesni a lo tuloldalara.
Zsoc
2011. június 13. — 01:50:33
Meg kell tanulni értelmesen CSS-t írni, és nem ilyen marhaságokat használni…
Mefi
2011. június 13. — 02:02:54
[re=6064604]Zsoc[/re]: én elég értelmesen tudok CSS-t írni, remélem azért nem haragszol hogy ilyen marhaságot is használok! 🙂
saxus
2011. június 13. — 04:11:16
[re=6064604]Zsoc[/re]: Ezzel az erővel mondhatjuk azt is, hogy dobjunk ki minden kódgeneráló eszközt.
Marcell
2011. június 13. — 04:16:51
Miközben fejlesztesz, használod a JS verziót (magamnál mindig van), aztán mikor végleges a honlap (“átadás” van), akkor lemented egy jól cache-elhető statikus CSS fájlba a generált tartalmat – nem így a legegyszerűbb, elkerülve a szerver oldali trükközést?
Zsoc
2011. június 13. — 11:08:06
[re=6064608]saxus[/re]: Nem ez volt a mondandóm célja.
Ugyanakkor a Less céges környezetben kiszámíthatatlanná teszi az egy projectre számított időt. Miért?
Amíg a magán-projectedben dolgozol, addig azt használsz, amit jólesik, viszont céges környezetben számolni kell azzal is, hogy nem biztos, hogy az fejezi be a munkát, aki elkezdte. Egy ilyen eszköz, és a vele járó tényezők nem tartoznak (és nem is tartozhatnak) abba a kategóriába, amit elvárásként lehet kezelni bármelyik másik kollégától.
Mefi
2011. június 13. — 14:30:03
[re=6064609]Marcell[/re]: igen, hiszen a vegeredmeny mindig CSS, ez is a szepsege.
[re=6064614]Zsoc[/re]: reszben igaz, masik reszben egy fejleszto mindig legyen naprakesz, esismerjen akar ilyeneket is. Amugy ha jon egy uj fejleszto, vagy megtanulja vagy egyszeruen a CSS-t viszi tovabb amit a LESS allit elo. Hovatovabb szerintem technologiai szempontbol minden elvarhato a kollegaktol, plane egy ilyen egyszeru eszkoz. Ha nem varsz el semmit, abbol nagyobb baj lehet, lasd fent az SVN-es peldat. De ertem mire gondolsz, es reszben jogos.
tiny
2011. június 13. — 14:51:13
Szvsz nem ad ez a cucc annyival többet, hogy értelme legyen megtanulni. Nem mondom, hogy nagy erőfeszítés lenne, de nem látom benne a lehetőséget, ami eddig ne lett volna. (Szemben mondjuk egy jquery vs js párossal)
Mefi
2011. június 13. — 16:23:54
[re=6064618]tiny[/re]: igazából ha 1 perc alatt nem érted meg a lényegét, akkor tényleg felesleges. 🙂
tiny
2011. június 13. — 16:58:19
[re=6064619]Mefi[/re]: Azt értem, hogy mit akar, csak azt nem, hogy mitől több, mint amit eddig ugyanerre a célra használhattam. 🙂
Mefi
2011. június 13. — 17:09:00
[re=6064620]tiny[/re]: gyorsabban lehet szerintem összerakni egy CSS-t ezzel. 🙂
tiny
2011. június 13. — 17:17:55
[re=6064621]Mefi[/re]: Nekem alapvetően a változó meg függvény része volt, amit szem előtt tartottam, szvsz fölösleges. Ha van egy dizájnod, akkor úgyse úgy rakod össze a színt, hogy egy változóhoz mozgatod a pipettát és értéket kap, a böngészőben meg nézed, hogy milyen színe lesz. Lekerekítéshez meg nem kell függvény, pár sor az egész.
Mondjuk egy ilyenre kíváncsi lennék, hogy mennyi idő lenne LESS-el és nélküle egy azonos dizájnt megcsinálni. Beleértve egy fordítást, statikus css generálást és annak bedrótozását (mert másképp elég sok felesleges erőforrást használunk).
saxus
2011. június 13. — 22:02:44
[re=6064623]tiny[/re]: Pedig, ha valami, akkor az a valtozokezeles, amit nagyon-nagyon hianyolok a CSS-bol. Nem is muszaj rendes valtozokezeles, de valami konstans fele jo lenne. Veled hanyszor volt mar olyan, hogy meg kellett valtoztatni egy szint, amit hasznaltal kb. 2-3-4 helyen? Azon kivul hordozhatobba teszi a CSS-t.
Masreszt a nested rules valamivel kifejezobb valamint a mixinnel is lehet sporolni munkat.
Es amugy nem csak a munka sporolasa a lenyeg, hanem a karbantarthatosag/atlathatosag novelese. Lehet, hogy en kozelitem meg nagyon a programozoi oldalrol, de attol meg a CSS egy kodolasi munka.
Mefi
2011. június 13. — 22:57:54
Pont most csinálok egy felvágást, ma jött az e-mail hogy változtattak a dizájnon, két szín változott meg, egy helyen átírtam, vidámság. 🙂
Persze, egy project replace sem tartana több ideig, de akkor is.
tiny
2011. június 16. — 14:43:06
[re=6064633]saxus[/re]: Volt ilyen, de nekem mindig elég volt search & replace -> színkód, csere.