Procesory CSS

Preprocesory

Preprocesor CSS je nástroj, který ze zdrojového kódu zapsaného pomocí vlastní syntaxe vygeneruje výsledný klasický kaskádový styl (CSS). Oproti klasickému CSS nabízí funkce, proměnné a předdefinované sady tzv. mixiny.

Nevýhodou je nutnost kompilace do výsledného CSS.

CSS preprocesor:

  • umožňuje používat "klasické" CSS
  • do výsledného "zkompilovaného" CSS nepřidává žádné nové funkce
  • zjednodušuje a zpřehledňuje zápis kaskádových stylů
  • je možné používat proměnné, které umožňují měnit údaje na více místech najednou
    • ​vnořené lokální proměnné mají přednost před globálními
  • usnadňuje správu více CSS souborů
  • podporuje vnořené definice
  • matematické operace usnadňují výpočty rozměrů a barev
  • umožňuje definovat opakovaně využitelné tzv. mixins funkce
  • nabízí podmíněné funkce
  • definované sady funkcí je možné pojmenovat a využít tak tzv. jmenné prostory
  • umožňuje využívat jak zobrazované, tak i skryté komentáře
  • umožňuje "skrýt" vývojové postupy před zákazníkem

Nejznámější preprocesory CSS:

  • LESS (Leaner CSS – štíhlejší CSS)
  • SASS
    • youtube.com/watch?v=Q4UCtuvMDTI (česky)
    • peteschuster.com/2012/05/replacing-respond-js-with-sass/
  • Stylus
  SASS/SCSS Stylus LESS
Zpracování server server server i klient
Jazyk Ruby Ruby JavaScript
Syntaxe bez {};
i
klasické CSS
(vyžaduje nejvíce psaní)
bez {}, :;
i
klasické CSS
(vyžaduje nejméně psaní)
klasické CSS
Hlášení chyb nejpřesnější občas chybné určení řádku nejhorší
Možnosti zřejmě největší velké drobná omezení
Mixins Compass CSS3 mixins NIB LESS Elements
Bootstrap LESS mixins

Postprocesory

Modulární nástroje provádějící následnou transformaci CSS.

  • Prefix free - vyžaduje v prohlížeč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 prohlížeči povolený JavaScript
    • Autoprefixer (1 MB) – analýza CSS a následné doplnění pouze těch prefixových pravidel, která jsou nutná pro správnou funkčnost konkrétního prohlížeče. CSS je tedy možné psát dle aktuálních W3C standardů.
    • RTLCSS a další rozšíření