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 {} a ;
i
klasické CSS
(vyžaduje nejvíce psaní) |
bez {}, : a ;
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í
