Průvodce CSS preprocesory: co a jak?

Tohle je první část čtyřdílného seriálu o CSS preprocesorech podle obsahu mé přednášky z WordCamp Prague. O CSS preprocesorech jsem se už na Vzhůru dolů zmiňoval, psal o nich i David Grudl, ale přednáška dala příležitost pojmout téma více zeširoka.

Seriál je určený jednak těm co preprocesor zatím používat nezačali, pak těm co je používají na mírně pokročilé úrovni a chtějí vylepšit své pracovní postupy a nakonec těm co nevědí, který preprocesor vybrat. Začneme tedy úplně od začátku a postupně se propracujeme k myšlenkám, se kterými snad budete chtít polemizovat i vy pokročilejší.

Mrkněte na další díly:

1. Co a jak?
2. Technické vlastnosti
3. Jak vám vylepší pracovní postupy?
4. Který vybrat?

Pojďme hned na první díl. Řekneme si tady co preprocesory jsou, zda jsou pro vás, jak s nimi začít a pozastavíme se u oblíbené výmluvy, proč je používat – debugování.

CSS preprocesor — cože?

CSS preprocesor je jazyk, který je postavený nad CSS. Přidává do něj nové jazykové vlastnosti nebo řeší jiné jeho technické slabilny. V seriálu se zabýváme nejznámějšími z preprocesorů — LESSem, SASSem a Stylusem.

Mám se o preprocesory vůbec zajímat?

Pokud se profesionálně zabýváte webdesignem a (klidně jen občas) saháte na CSS, určitě se o ně zajímejte. Nebo rovnou začněte používat.

Opakuji se, ale nenašel jsem lepší přirovnání: Pokud na projektech používáte git nebo jiný verzovací systém, pravděpodobně CSS preprocesor potřebujete. Čím komplexnější projekty děláte, čím více lidí upravuje csska, čím více do projektu saháte i po spuštění, tím vděčnější za preprocesor budete.

Zkušenější asi potvrdí, že jde o návykovou technologii. A není to jen pro velké weby. S preprocesorem začínám psát i malinké weby, není důvod dělat výjimky z ověřených pracovních postupů.

Jak s preprocesory začít?

Kousky kódu si můžete vyzkoušet v CodePenu nebo online testerech samotných preprocesorů — šup do LESStesteru, SassMeisteru nebo Stylus testovačky.

Mluvili jsme o tom, že preprocesor se kompiluje do CSS. Obvyklý pracovní postup je dělat to lokálně během práce vývojáře hned po uložení zdrojového (*.less, *.sass, *.styl) souboru. Máte hned několik způsobů jak toho dosáhnout:

• Speciální UI aplikace
  Nejobvyklejší cesta kompilace do CSS. Prepros, CodeKit, Koala a další. Výhodou je jednoduchá správa. Nevýhodou zase poněkud omezený rozsah dalších funkcí.

• Editory a IDE
  Třeba i váš editor už umí kompilovat preprocesorový kód. Je to hračka pro Sublime, Eclipse, VisualStudio, NetBeans i další. Mrkněte na seznam editorů pro LESS. U SASSu, Stylusu jsem podobný seznam nenašel, což ale neznamená, že podporu IDE nemají.

• Grunt
  Automatizátor procesů během lokálního vývoje. Kompilace preprocesorů je pro něj hračka. Nevýhodou je práce s příkazovou řádkou. Výhodou obrovské množství dalších funkcí (minifikace, převod SVG do PNG, autoprefixer…). Dobré také je, že Gruntfile verzujete a sdílíte tak konfiguraci způsobu kompilace pro všechny členy týmu.

• Příkazová řádka
  Kompilovat z příkazové řádky můžete i bez Gruntu. Potřebujete jen vhodné prostředí — Stylus a LESS jsou napsané v Javascriptu, takže Node.js, SASS zase v Ruby. Hodí se i pro pracovní postupy s kompilací až na serveru.

• Kompilace v prohlížeči
  Tu zatím nabízí jen LESS. Jakkoliv je skvělá pro vyzkoušení preprocesoru nebo pro velmi specifické pracovní postupy, určitě bych vám ji nedoporučil nasazovat do produkčního prostředí.

Jak je to s debugováním?

Aneb „Kde jsou moje čísla řádků?”.

Preprocesorovým začátečníkům občas vadí, že jim DevTools nebo Firebug ukazují čísla řádku ve výsledném, zkompilovaném CSS souboru a neodpovídají tedy číslům řádků ve zdrojových souborech.

Existují cesty jak si v obou ladících nástrojích zobrazit čísla řádků — FireLESS, FireSASS, FireStylus pro FireBug nebo modernější a pokročilejší Source Maps pro DevTools. Ty doporučuji vaši pozornosti, protože tohle je jen jedna z věcí, kterou umí.

Nicméně! Dovolím si tvrdit, že pokud k ladění chyb nutně potřebujete znát čísla řádků, je něco shnilého ve vašem kódu. Rozdělením kódu do malých komponent (budeme se jí zabývat v dalších dílech) a organizací pomocí některé z metodik organizace CSS kódu potřeba ladění přes čísla řádku téměř odpadá.

Co a jak?

Sečteno, podtrženo: CSS preprocesory jsou pro vás. Je velké množství způsobů jak je používat, vybere si každý. A na čísla řádku se už nedá vymlouvat. :-)

Příště se podíváme na technické vlastnosti preprocesorů.