« LESS »

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.

LESS CSS

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.

Kommentek RSS ikon
A bejegyzéshez érkezett kommentek, amiket RSS csatornán is követhetsz.
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… :)
é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
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/

saxus: szerintem közös projektnél még a designerek is bírnak alkalmazkodni, ha pénzt kapnak a melóért :)
Andrei: 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.
Meg kell tanulni értelmesen CSS-t írni, és nem ilyen marhaságokat használni…
Zsoc: én elég értelmesen tudok CSS-t írni, remélem azért nem haragszol hogy ilyen marhaságot is használok! :)
Zsoc: Ezzel az erővel mondhatjuk azt is, hogy dobjunk ki minden kódgeneráló eszközt.
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?
saxus: 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.
Marcell: igen, hiszen a vegeredmeny mindig CSS, ez is a szepsege.

Zsoc: 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.
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)
tiny: igazából ha 1 perc alatt nem érted meg a lényegét, akkor tényleg felesleges. :)
Mefi: Azt értem, hogy mit akar, csak azt nem, hogy mitől több, mint amit eddig ugyanerre a célra használhattam. :)
tiny: gyorsabban lehet szerintem összerakni egy CSS-t ezzel. :)
Mefi: 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).
tiny: 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.
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.
saxus: Volt ilyen, de nekem mindig elég volt search & replace -> színkód, csere.
Új komment

Itt az adott bejegyzésben elhangzottakhoz szólhatsz hozzá. Ha primitív, csúnya, vagy bunkó erkölcsről teszel tanúbizonyságot, tuti, hogy kimoderállak és rosszat mondok rólad. A hozzászólás nem kötelező, amit írsz vállald föl!

Ezeket az adatokat - ha a böngésződ kezeli a kukikat - csak egyszer kell megadnod, később módosíthatod.

Ha van gravatarod - és a gravataros e-mail-címeddel kommentálsz -, akkor az megjelenik. Ha nincs, vagy nem tudod miaz, akkor olvasd el az útmutatót és regisztrálj.

Neved: E-mail címed (nem jelenik meg): Webszájtod (ha van): Kommented: Mennyi öt és öt összege?
Ez védelmi célokat szolgál, szimplán írd be a fenti összeadás összegét!

A kommentedet írhatod nagyobb mezőbe vagy akár formázhatod is, de ha nem szalonképes, akkor moderálom!

Ajánló
Ebben a témában, esetleg ezen a napon voltak még ilyenek is:

Vast (2006. március 14., 05:23:29)
Blogbeat (2006. február 22., 03:39:41)
UX (2012. január 12., 11:59:10)

Érdekességek
Száraz számok, pusztán csak tények:

Ez a bejegyzés 349 napja született, 407 szóból, és 1967 karakterből áll. Ajánlhatod bizonyos linkgyűjtő oldalaknak: