Procesory CSS

Preprocesory

Preprocesor CSS je nástroj, ktorý zo zdrojového kódu zapísaného pomocou vlastnej syntaxe vygeneruje výsledný klasický  kaskádový štýl (CSS). Oproti klasickému CSS ponúka funkcie, premenné a preddefinované sady tzv. mixíny .

Nevýhodou je nutnosť kompilácie do výsledného CSS.

CSS preprocesor:

  • umožňuje používať „klasické“ CSS
  • do výsledného „skompilovaného“ CSS nepridáva žiadne nové funkcie
  • zjednodušuje a sprehľadňuje zápis kaskádových štýlov
  • je možné používať premenné , ktoré umožňujú meniť údaje na viacerých miestach naraz
    • ​vnorené lokálne premenné majú prednosť pred  globálnymi
  • uľahčuje správu viacerých CSS súborov
  • podporuje  vnorené definície
  • matematické operácie uľahčujú výpočty rozmerov a farieb
  • umožňuje definovať opakovane využiteľné tzv. mixins funkcie
  • ponúka podmienené funkcie
  • definované sady funkcií je možné pomenovať a využiť tak tzv. menné priestory
  • umožňuje využívať ako zobrazované, tak aj skryté komentáre
  • umožňuje „skryť“ vývojové postupy pred zákazníkom

Najznámejšie preprocesory CSS:

  • LESS (Leaner CSS – štíhlejší CSS)
  • SASS
    • youtube.com/watch?v=Q4UCtuvMDTI (slovensky)
    • peteschuster.com/2012/05/replacing-respond-js-with-sass/
  • Stylus
SASS/SCSS Stylus LESS
Spracovanie server server server aj klient
Jazyk Ruby Ruby JavaScript
Syntax bez {} a  ;
aj
klasické CSS
(vyžaduje najviac písania)		 bez { } ,: a ;  aj klasické CSS (vyžaduje najmenej písanie) klasické CSS
Hlásenie chýb najpresnejšie občas chybné určenie riadku najhoršie
Možnosti zrejme najväčší veľké drobné obmedzenia
Mixins Compass CSS3 mixins NIB LESS Elements
Bootstrap LESS mixins

Postprocesory

Modulárne nástroje vykonávajúce následnú transformáciu CSS.

  • Prefix free – vyžaduje v prehliadači povolený JavaScript (6 kB)
    • Desktop: IE9+, Opera 10+, Firefox 3.5+, Safari 4+ a Chrome
    • Mobile: Mobile Safari, Android browser, Chrome a Opera Mobile
  • PostCSS – vyžaduje v prehliadači povolený JavaScript
    • Autoprefixer (1 MB) – analýza CSS a následné doplnenie iba tých prefixových pravidiel, ktoré sú potrebné pre správnu funkčnosť konkrétneho prehliadača. CSS je teda možné písať podľa aktuálnych W3C štandardov.
    • RTLCSS a  ďalšie rozšírenie