TOP 5 nejlepších CSS preprocesorů

(Čtení na 13 – 15 minut)

Co je CSS preprocesor

CSS preprocesor je program, který umožňuje generovat klasické CSS z vlastní jedinečné syntaxe. Internetové prohlížeče rozumějí a poslouchají pouze CSS, takže jej nelze jednoduše nahradit zcela novým jazykem. CSS má však určitá omezení, která se v malých projektech ztratí, ale vybírají si svou daň, když máte co dočinění s velkými projekty. Tento problém vyřeší preprocesory CSS.

Existuje mnoho preprocesorů, ze kterých si můžeme vybrat. Hlavní výhodou většiny CSS preprocesorů, je že vývojářům přidávají extra funkce, které v čistém CSS neexistují. Patří mezi ně funkce jako je mixin, selektor vnoření, selektor dědičnosti, atd. Díky těmto funkcím je struktura CSS čitelnější a snadněji se udržuje. Praktické doplňkové funkce vám tedy umožní být efektivnější při každodenní práci a zajistí vám další škálovatelnost.

Chcete-li použít nějaký CSS preprocesor, musíte si na svůj webový server nainstalovat CSS kompilátor. Další možností je použít CSS preprocesor ke kompilaci už ve vývojovém prostředí a poté nahrát již kompilovaný CSS soubor na webový server.

Jaký preprocesor CSS použít?

Výběr CSS preprocesoru není snadný. Stejně jako u většiny informačních technologií máte i zde řadu možností, z nichž každá má své vlastní výhody a vášnivou uživatelskou základnu. Chcete-li si vybrat, musíte znát jejich možnosti, rozpoznat jejich silné stránky a porozumět rozdílům, které nabízí

Sass vs. SCSS

Sass (Syntactically Awesome Style Sheets) byl poprvé představen v roce 2006 a je považován za průkopníka preprocesorů CSS. Není divu, že je také nejoblíbenější! Sass se používá v Bootstrapu 4, který je v současné době jedním z nejpoužívanějších front-endových frameworků na světě a je tak významným trendem ve světě IT.

V dnešní době má dvě samostatné syntaxe, Sass a SCSS. Zatímco v prvních verzích preprocesoru existoval pouze Sass, tým se obával, že je trochu moc odlišný od obyčejného CSS. Proto ve třetí verzi představili novou syntaxi nazvanou SCSS (Sassy CSS). Soubory tohoto preprocesoru mohou mít příponu .sass nebo .scss.

Hlavní rozdíl mezi Sass a SCSS spočívá v tom, že SCSS používá středníky a závorky stejným způsobem jako CSS. Sass na druhou, navíc k přiřazení používá místo znaménka rovná se místo dvojtečky. Zatímco SCSS je nyní oficiálně hlavní syntaxí preprocesoru Sass CSS. Někteří vývojáři tvrdí, že Sass je čitelnější, protože je výstižnější. SCSS je však mnohem snazší se naučit.

Mezi velké společnosti využívající Sass patří – Indiegogo, Patreon a WeChat

Syntaxe Sass vs SCSS

  • SCSS znamená Sassy CSS. Na rozdíl od Sass není SCSS založen na odsazení.
  • Přípona .sass se používá jako původní syntaxe pro Sass, zatímco SCSS nabízí novější syntaxi s příponou .scss.
  • Na rozdíl od Sass má SCSS složené závorky a středníky, stejně jako CSS.
  • Na rozdíl od SCSS je Sass obtížně čitelný, protože je zcela odlišný od CSS. Proto je SCSS doporučenější syntaxí Sass, protože je snazší číst a velmi se podobá nativnímu CSS a zároveň si užívá sílu Sass.

Sass syntaxe 

$font-color: #fff
$bg-color: #00f
 
#box
  color: $font-color
  background: $bg-color

SCSS syntaxe

$font-color: #fff;
$bg-color: #00f;
 
#box{
  color: $font-color;
  background: $bg-color;
}

Výsledné CSS

#box {
  color: #fff;
  background: #00f;
}

V obou případech, ať už je to Sass nebo SCSS, bude kompilovaný kód CSS stejný.

Less

Less (Leaner Style Sheets) se poprvé objevil v roce 2009. Preprocesor Less CSS byl ovlivněn Sassem, ale mělo to později vliv na formát SCSS. Proč? Protože na rozdíl od první verze syntaxe Sass byl tento preprocesor CSS původně vytvořen s úmyslem co nejvíce se podobat čistému CSS. Nejen, že to znamenalo plynulejší křivku učení, ale můžete také použít jakýkoliv předem napsaný kód CSS jako platný v Less. Samotný preprocesor Less CSS je napsán v JavaScriptu, což také zjednodušuje jeho nastavení. 

Při porovnání Less vs. Sass uvidíme, že jsou si tyto preprocesory ve svých základních funkcích hodně podobné. Oba umožňují vnoření, import a použití proměnných. V Less však můžete také zvedat proměnné a extrahovat určité komponenty z barvy, což u Sass není možné – jmenovitě odstín, sytost, světlost a jas. Na druhou stranu vám Sass umožňuje používat příkazy if a interpolovat je v selektorech a názvech vlastností. Jeho syntaxe také obsahuje ternární operátory a vnořené kolektory a v Less to bohužel možné není.

Další malou nevýhodou Less je to, že používá symbol @ pro deklaraci proměnné (Sass místo toho používá znak $). V CSS však lze @ použít také pro keyframes a media queries. To může při čtení kódu způsobit trochu zmatek.

Syntaxe LESS

@font-color: #fff;
@bg-color: #00f
 
#box{
  color: @font-color;
  background: @bg-color;
}

Výsledné CSS

#box {
    color: #fff;
    background: #00f;
  }

Stylus

Stylus byl spuštěn v roce 2010 bývalým vývojářem Node.js TJ Holowaychukem, téměř 4 roky po vydání Sass a 1 rok po vydání LESS. Stylus je napsán v Node.js a je proto atraktivní volbou pro ty, kteří již znají toto prostředí, i když má znatelně menší uživatelskou základnu než Sass or Less, stojí za to se na něj podívat.

Co dělá Stylus zajímavým je jeho flexibilita: dvojtečky, středníky a čárky jsou volitelné. Kromě toho k definování bloků kódu nepotřebujete složené závorky: místo symbolů k tomu Stylus používá odsazení. Pokud jde o proměnné, můžete použít znak $ jako v Sass … Ale můžete ho také klidně přeskočit. Jednou z výhod Stylus CSS oproti Sass nebo LESS je, že je vybaven extrémně výkonnými integrovanými funkcemi a je schopen zvládnout náročné výpočty.

To vám umožní psát méně a mít čistší kód. Někteří vývojáři bohužel považují tuto flexibilitu za chybu. Bez jasných identifikátorů je kód těžko čitelný a srozumitelný, zejména u větších projektů. Pokud porovnáme Stylus vs. Sass, jasně vyhrává Sass s jeho snadno čitelným kódem.

Syntaxe Stylus

/* Zapsáno jako klasické CSS */
font-color = #fff;
bg-color = #00f;
 
#box {
    color: font-color;
    background: bg-color;
}
 
/* Nebo */

/* Bez složených závorek */
font-color = #fff;
bg-color = #00f;
 
#box 
    color: font-color;
    background: bg-color;
 
/* Nebo */
 
/* Bez dvojteček a středníků */
font-color = #fff
bg-color = #00f
 
#box 
    color font-color
    background bg-color

Používá příponu .styl. Stylus nabízí velkou flexibilitu při psaní syntaxe, podporuje nativní CSS a umožňuje vynechání závorek dvojteček a středníků. Všimněte si také, že Stylus nepoužívá @ nebo $ symboly pro definování proměnných. Místo toho Stylus používá operátory přiřazení k označení deklarace proměnné.

PostCSS

PostCSS ve skutečnosti není preprocesor CSS. Zatímco tým tento termín zpočátku používal. Může být použit jako preprocesor, postprocesor – vlastně procesor všeho druhu, který vám také pomůže optimalizovat, vyčistit váš kód a provádět nejrůznější další úkoly. PostCSS je ve své podstatě API s množstvím dostupných JavaScript pluginů (můžete napsat i své vlastní). Pomocí nich můžete zpracovávat CSS a vytvářet vlastní nástroje.

PostCSS byl původně vydán v roce 2013 a je aktuálně ve verzi 7. Můžete jej použít jak s prostou syntaxí CSS, tak s výše uvedenými preprocesory. To, co mu dává mírný náskok před Sass, Less a dalšími preprocesory CSS, je modularita. Umožňuje vám vybrat si funkce, které potřebujete, a pracovat rychleji. Není divu, že jeho popularita rychle roste – dokonce existují veřejná prohlášení, že by mohla být použita v nadcházející verzi Bootstrapu.

Syntaxe PostCSS

PostCSS dokáže transformovat styly v jakékoli syntaxi a neomezuje se pouze na CSS. Vytvořením vlastní syntaxe můžete styly transformovat v libovolném požadovaném formátu.

Psaní vlastní syntaxe je mnohem těžší než psaní pluginu PostCSS.

Existují 3 typy syntaxe PostCSS

  • Analyzátor pro analýzu vstupního řetězce do stromu uzlu.
  • Stringifier pro generování výstupního řetězce stromem uzlu.
  • Syntaxe obsahující analyzátor i stringifier.

Příklad syntaxe PostCSS

module.exports = {
  parse:     require('./parse'),
  stringify: require('./stringify')
}
const postcss = require('postcss')
module.exports = function stringify (root, builder) {
const string = decl.prop + ':' + decl.value + ';'
builder(string, decl)
};
module.exports = function parse (css, opts) {
const root = postcss.root()
// Přidat nodes do rootu
return root
}

Co jiného je dobré vědět?

Sass vs Less vs Stylus, co si vybrat?

Sass, LESS a Stylus dominují CSS preprocessorům. Sass / SCSS se v popularitě těší postavení nesporného lídra. Všechny tři preprocesory mají téměř podobné vlastnosti a funkce. Každý preprocesor CSS plní daný úkol svým charakteristickým jedinečným způsobem, který umožňuje vývojářům používat extrémně výkonné nástroje k psaní čistého kódu v rychlejším tempu.

Zatímco Sass má největší uživatelskou základnu a aktivní komunitu, LESS má nejsnadnější kompilaci a integraci. Na druhou stranu je Stylus stále populární volbou pro vývojáře Node.js, protože kombinuje rozsáhlou logickou zdatnost Sass s jednoduchostí LESS. Některé další preprocesory CSS, které můžete prozkoumat, jsou:

  1. Pleeease
  2. CSS-Crush
  3. Myth
  4. Garden
  5. Rework

Preprocesory CSS přidávají nezbytný krok kompilace, který může zpomalit vývoj i ladění. Konečný vygenerovaný soubor CSS může být také docela velký.

Výhody však v tomto okamžiku daleko převažují nad nevýhodami. Proměnné, mixiny, vnoření, několik dalších funkcí – díky všem těmto funkcím je psaní a údržba kódu mnohem pohodlnější a rychlejší.

Nevýhody CSS preprocesorů

Preprocesory CSS mají mnoho výhod. ale stejně jako většina nástrojů mají také řadu nevýhod.

Ladění je těžší

Preprocesory vyžadují kompilaci, což znamená, že čísla řádků kompilovaného CSS jsou při pokusu o ladění kódu irelevantní. Ladění je následně dvakrát tak těžké, než samotné programování. Toto je jedna z největších nevýhod těchto jinak velmi užitečných nástrojů.

Zdrojové mapy poskytují řešení tohoto problému, ale je třeba je nastavit a nefungují ve všech prohlížečích, zejména v těch, kde se často objevují chyby.

Bez funkčních zdrojových map nám zbývá pouze hledat CSS pravidla v naději, že najdeme to, co hledáme.

Kompilace CSS zpomaluje vývoj

Časy kompilace mohou být při rozsáhlých projektech opravdu znatelné, i když používáte ten nejlepší nástroj na moderním rychlém počítači. Znáte ten pocit, když obnovíte stránku a nevidíte žádné změny – tak to je ono.

Mohou vytvářet obří CSS soubory

Zdrojové soubory  preprocesoru mohou být malé, ale následný vygenerovaný CSS může být obrovský, což je také jednou z podstatných nevýhod. Je potřeba si uvědomit, že při používání preprocesoru pro CSS ztrácíme určitou kontrolu nad výsledným souborem.

Schopnosti vs porozumění

Zatímco preprocesory CSS se v posledních letech velmi rozšířily, stále u mnohých vývojářů existují mezery v jejich znalostech. Zejména pokud se jedná o porozumění kompromisům.

Je velký rozdíl mezi pochopením daného nástroje a jeho opravdu efektivním používáním bez dalších problémů s tím spojených.

Shrnutí

Je velmi snadné přidat preprocesor CSS do vašeho projektu, ale není tak snadné jej odstranit. Právě proto bychom měli přemýšlet dvakrát, než se tak rozhodneme.