Na navigaci | Klávesové zkratky

SASS, LESS, Stylus nebo čisté CSS? (1)

Už pár let jsem si pořádně nezakódoval a začalo mi to chybět. Zachtělo se mi udělat stránky podle nejnovějších trendů. Responsivní design okořeněný CSS preprocesory. Ale váhal jsem: jsou preprocesory víc, než jen chvilková móda?

CSS preprocesor je nástroj, který vám ze zdrojového kódu zapsaného ve vlastní syntaxi vygeneruje CSS pro prohlížeč. Mezi nejznámější patří SASS, LESS a Stylus.

Faktem je, že jakmile začne stylopis kynout do větších rozměrů, řada věcí se řeší dosti nepohodlně. Je třeba vynaložit úsilí, aby zůstal čitelný a srozumitelný. Aby se z něj nestal write-only soubor plný magický konstant a hacků. Spoustu těchto nešvarů preprocesory řeší, nejvíc se těším na vnořené definice, matematické výrazy, mixiny a proměnné.

Vlastně je smutné, že preprocesory musely vzniknout. Ukazuje to na zanedbanost vývoje CSS. Na druhou stranu, může z nich i těžit. Preprocesory jsou mladé projekty procházející bouřlivým vývojem, reagují na potřeby uživatelů a lze u nich, na rozdíl od standardu, tolerovat i případné nekompatibilní změny. Ve finále tak mohou ukázat směr, kterým se má vydat příští CSS.

Pokud se kódováním webů bavíte řadu let, máte vybudované konvence pomáhající nedostatky obcházet. Preprocesory pak nemusí být úplně samozřejmou volbou. Nicméně dnes je běžné používat různé CSS generátory a preprocesor nabízí čistější cestu, než copy&pastovat vygenerovaný kód.

Rád zkouším nové věci, proto jsem dal preprocesorům šanci. Který ale zvolit? Nejlepší je si všechny osahat.

Instalace

Začneme tedy rovnou instalací. Na webu SASS i LESS rychle najdete vyčerpávající postup, jak knihovny získat. SASS je napsaný v Ruby, LESS v Node.js, takže prvním krokem bude instalace překladače, což by neměl být v žádném operačním systému problém. Preprocesor pak nainstalujete příkazem:

gem install sass

resp.

npm install less

Velmi snadné, PHP může závidět.

Naopak web Stylusu selhává, snaží se mást odkazy na Github, zatímco informace, jak ho instalovat, je důmyslně skrytá kdesi vespod úvodní stránky. Vězte tedy, že Stylus je také napsán v Node.js a nainstaluje se obdobně příkazem npm install stylus.

Pozor na jednu věc, npm instaluje balíček do aktuálního adresáře, takže abyste mohli preprocesory pohodlně spouštět z příkazové řádky, musíte si cestu k lessc.cmd a stylus.cmd přidat do proměnné PATH. Ve Windows se to dělá sparťansky, takže spíš oceníte možnost nainstalovat balíčky do globálního adresáře (pomocí přepínače -g, tj. npm install -g stylus), ke kterému už cestu zaregistroval při instalaci překladač.

Příkazová řádka pro SASS a Stylus nabízí spoustu voleb, LESS umí jen konvertovat vstupní soubor do výstupního CSS. Zmátlo mě, že SASS i Stylus zavolané bez parametrů se nijak neohlásí a očekávají vstup z klávesnice. Zavolejte je tedy s parametrem -h a vypíše se nápověda všech voleb.

Vývoj a deployment

Preprocesory vyžadují, aby se mezi úpravou stylopisu a zobrazením v prohlížeči udělat jeden krok navíc: kompilace do CSS.

Tento krůček může mnohé odradit. Pokud jste zvyklí rovnou editovat CSS soubory na FTP serveru, nad preprocesorem vůbec neuvažujte. Existují sice možnosti, jak třeba z LESS generovat CSS za běhu přímo v prohlížeči, ale rozhodně nejsou určeny pro produkční nasazení.

Pokud máte deployment automatizovaný, stačí do procesu zařadit kompilaci voláním příkazové řádky a je vystaráno.

Jak řešit onen krok navíc během vývoje? Kodéra rozhodně blbnutí s příkazovou řádkou nezajímá a chce rovnou psát stylopis.

Jak jsem zmínil, LESS umí překládat stylopisy v prohlížeči, stačí tedy zalinkovat soubor less.js a můžete rovnou připojovat soubory ve formátu LESS (povšimněte hodnoty atributu rel):

<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>

SASS a Stylus zase nabízejí sledovací režim, ve kterém monitorují adresář se styly ve svém formátu a při každé změně souboru je ihned překládají do CSS.

// překlad souborů z adresáře /css.sass do /css (včetně podadresářů)
sass --watch css.sass:css

// překlad souborů z adresáře /css.stylus do /css
stylus --watch css.stylus --out css

Do vygenerovaného CSS lze pomocí přepínače --line-numbers přidat pro lepší orientaci komentáře s číslem řádku zdrojového souboru. Pokud vyvíjíte ve Firefoxu, ještě užitečnější je nainstalovat FireStylus a kompilovat s přepínačem --firebug. V záložce HTML by se pak měly objevovat odkazy přímo na zdrojový soubor. Píšu měly, protože mi to nefunguje.

Všechny tři preprocesory jsou seřazeny na startovní čáře. Který z nich běží nejlépe? Pokračování příště.

(Doporučuji aktuálnější průvodce CSS preprocesory od Martina Michálka, první a druhý díl.)

Komentáře

  1. k0rnel #1

    avatar

    Ten krok naviac nemusi byt az tak pravda, napr. pre LESS existuje nastroj SimpLESS kde staci urcit .less subor, ktory sa ma kompilovat, a po kazdej zmene/ulozeni v editore ho SimpLESS automaticky prekompiluje do .css, takze v podstate nie je potrebna ziadna interakcia od kodera.

    před 12 lety
  2. David Grudl #2

    avatar

    Ach bože…

    před 12 lety | reagoval [3] Jirka D. [4] rADo [5] k0rnel
  3. Jirka D. #3

    avatar
    před 12 lety
  4. rADo #4

    avatar

    #2 Davide Grudle, ten generátor komentářů si oprav. Čte ti asi jen první odstavec, ne celý článek.

    před 12 lety
  5. k0rnel #5

    avatar

    #2 Davide Grudle, Vies, ze to bolo myslene ako protiklad ku vsetkym „klasickym“ konzolovym metodam, ktore si popisal. Kompilacia je nutna samozrejme vzdy, ale niektorymi metodami sa o nu user nemusi starat „rucne“, napr. tebou popisanym zahrnutim konzoloveho prikazu do nejakeho deployment scriptu, alebo takouto jednoduchou utilitou, vhodnou imho hlavne pre cisto frontend koderov.

    před 12 lety
  6. Ján Bočínec #6

    avatar

    Mojim favoritom je určite LESS, ale možno to je len tým, že som sa k nemu dostal ako prvému a už dlhšie s ním robím.

    Používate niekto PHP kompilery ako lessphp alebo iné čo by ste vedeli odporučiť?

    před 12 lety | reagoval [7] Lopo
  7. Lopo #7

    avatar

    #6 Jáne Bočínci, Ja používam lessphp v ramci jedného webu čo som nedávno dorobil. Problém s íim však je, že neni 100% rovnako fungujúci (vstup->výstup) ako originál ruby verzia. Sám mám ale radšej SASS. Ináč nejaké veci ohľadom CSS preprocesorov som bol spísal pred nejakou dobou na svojom blogu

    před 12 lety | reagoval [13] Lopo
  8. jan korbel #8

    avatar

    Někomu by se mohl hodit LiveReload
    Zadáte, jaký adresář/soubor má sledovat a jakmile se změní, nejenže reloadne daný soubor v prohlížeči (pokud to budete chtít), ale navíc provede i pre-procesnutí CSS.

    Pro Windows zatím jen pre-alpha verze.

    před 12 lety
  9. Milan Holý #9

    avatar

    Pokud patříte stejně jako já ke stádu apple oveček, tak máte obrovské štěstí. Existuje totiž program, který nezávisle na editoru při každém uložení sass less nebo stylus vygeneruje css. navíc vám automaticky updatne zmenu v prohlížeči bez reloadu stránku. minifukuje a kontroluje js apod. Jmenuje se CodeKit

    před 12 lety
  10. Milan Holý #10

    avatar

    A samozřejmě nemusíte nic instalovat.

    před 12 lety
  11. Jirka D. #11

    Tak jsem o tom drobně přemýšlel a domnívám se, že David nakonec zvolil jako preprocesor CSS nějaké svoje vlastní udělátko, které šikovně kombinuje kešování Nette a pár dalších částí frameworku, aby právě nemusel řešit tu kompilaci (aby se tu udělalo ňák samo ? ). Navíc ořezaná SASS syntaxe vypadá vzdáleně jako NE-ON použitý na konfiguraci Nette…dalším hintem vedoucím k této domněnce je jediný zvýrazněný text celého blogpostu, který právě zdůrazňuje, že se musí použít mezikrok a to je samozřejmě vždycky problém (ano, řešení existují, ale není žádné univerzální)…takže po Apigenu máme možná vyhlídku na další Nette-based projekt ?

    před 12 lety
  12. David Grudl #12

    avatar

    CSS preprocesor rozhodně psát nechci ?

    před 12 lety
  13. Lopo #13

    avatar

    #7 Lopo, ops, chybička se vloudila … samozrejme LESS neni v ruby ale JS …

    před 12 lety
  14. Daniel Milde #14

    avatar

    Mně zatím nejzajímavější (syntaxí i možnostmi) přijde Stylus. Viz článek by @Steida Proč je lepší Stylus než CSS LESS

    před 12 lety
  15. Jan Bien #15

    avatar

    Malá oponentura k: „Tento krůček může mnohé odradit. Pokud jste zvyklí rovnou editovat CSS soubory na FTP serveru, nad preprocesorem vůbec neuvažujte.“

    Při práci na platformě PHP a použití lessphp kompilátoru není problém editovat LESS soubory přímo na serveru. Lessphp se postará o aktualizaci.

    před 12 lety
  16. Martin #16

    avatar

    Já používám LESS a to hlavně proto, že na něj šlo plynule přejít z CSS (využít stávající CSS soubory u starších projektů) bez nutnosti učit se nějakou výrazně odlišnou syntaxi.

    Kompilaci za mě řeší lessphp v kombinaci s .htaccess (mod_rewrite) – z html se odkazuji např. na http://example.cz/css/screen.css, na serveru však existuje i zdrojový soubor screen.less. Pokud screen.css ještě neexistuje, tak se zkompiluje ze screen.less a uloží jako screen.css. Takže příště už se načte přímo screen.css (v .htaccess podmínka !-f). Pokud mám zapnutý vývojový režim, tak se nic neukládá – kompilace tedy probíhá při každém pokusu o načtení screen.css znovu. Pokud budu někdy v budoucnu za ostrého provozu potřebovat aktualizovat zkompilovaný screen.css, tak ho prostě smažu…

    před 12 lety | reagoval [17] Taco
  17. Taco #17

    avatar

    #16 Martine, Hmm, tohle je řešení, ne? Jediná nevýhoda, je dříve zmíněná nekompatabilita.

    před 12 lety | reagoval [18] Martin
  18. Martin #18

    avatar

    #17 Taco, Ano, nekompatibilita zde je, tuším že jsou to středníky, které se v lessphp používají jako oddělovače parametrů v mixinech. V definici na webu less jsou uvedeny čárky (https://web.archive.org/…lesscss.org/). Potom také nevím, jak je na tom lessphp s podporou všech možností less, protože zdaleka všechny nevyužívám.

    před 12 lety
  19. Martin #19

    avatar

    Já nějak nevím. Není CSS něco, co by měl (pomoci) generovat editor? Chci říct, proč vnášet programové instrukce do stylopisu, který vlastně z principu postrádá jakoukoliv dynamiku? Aby, až do toho někdo za rok poleze, mohl přepsat hodnotu na jednom místě místo na pěti? Nebo mi něco uniká?

    před 12 lety
  20. Petr Staníček #20

    avatar

    Jen pro úplnost aktuální zkušenost z vývoje velké aplikace: pro samotné psaní stylu a průběžné ladění s editací přes FTP je nalinkování .less zdrojáku přímo do stránky a on-fly kompilace JS překladačem při každém reloadu úplně v pohodě a ideálně použitelné. Ovšem ihned po doladění se to musí vyhodit a do deploye už poslat jen zkompilované CSS.

    před 12 lety
  21. Michal #21

    Asi pred pul rokem jsem se vobul do sassu respektive http://compass-style.org/, kterej na nem stoji. Pozdeji jsem na jednom projektu kvuli Twitter bootstrap pouzival less a moc dobre se mi neprechazelo. Cert vem syntax, ono je to hodne podobny a da se to stridat, ale v less je vsechno takovy polovicaty. Ustavicne narazim na problemy jako treba nemoznost pouzivani promennych v stringach v ceste k souboru v background-image apod..

    V kazdym pripade i less je lepsi nez dratem do oka .)

    před 12 lety

Tento článek byl uzavřen. Už není možné k němu přidávat komentáře.


phpFashion © 2004, 2024 David Grudl | o blogu

Ukázky zdrojových kódů smíte používat s uvedením autora a URL tohoto webu bez dalších omezení.