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.

LESS, SASS, Stylus

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

Source Maps

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

Komentáře

comments powered by Disqus

Podobné články

zařazené v kategoriích Nástroje, CSS.

Ebook „Vzhůru do CSS3“ verze 1.4: nové texty o Media Queries, prohlížečích a další

9. 1. 2017 na blogu

Kapitola o Media Queries je zgruntu nová atd. 12 stránek navíc.

Co ještě nastudovat na přelomu roku?

21. 12. 2016 na blogu

Když byste se náhodou nechystali odpočívat…

Kurz „Dnešní webová kodéřina“

Dnešní webová kodéřina

Kurz, který aktualizuje vaše znalosti webové kodéřiny. Citlivě mixuje novinky jako CSS3, Flexbox nebo SVG a osvědčené postupy. Ty nejdůležitější části si sami vyzkoušíte. Kurz vede Martin Michálek. Příští termín: 23. února.

Termíny dalších veřejných školení

9. března Responzivní design
23. března Optimalizace rychlosti načítání
4. dubna SVG
20. dubna Bootstrap
11. května Principy Javascriptu

Cena kurzů je 4 490 Kč bez DPH. Dřívější zákazníci mají 10 % slevu.
Všechny se konají v KC Greenpoint Praha.
Můžete si je také objednat do firmy.

Ebook „Vzhůru do CSS3“

Ebook „Vzhůru do CSS3“

Pořiďte si můj ebook „Vzhůru do CSS3“.
o nových CSS vlastnostech a moderní kodéřině.

Koupit za 249 Kč