Srovnání vybraných preprocesorů LESS, SASS a Stylus.
Moje osobní hodnocení zanesené do tabulek. Hodnotil jsem syntaxi, způsoby a jednoduchost kompilace a chybové hlášení, na stupnici od 1 do 3 (kde 3 je nejlepší). Dále jsem srovnával funkce které jsou v preprocesorech rozdílné.
|
Syntaxe |
Kompilace |
Chybové hlášky |
@import |
Podmínky |
Cykly |
Objekty |
url() |
Vlastní funkce |
Zanořování mixinu |
| LESS |
3/3 |
3/3 |
3/3 |
ano |
when |
for |
ne |
ne |
ne |
ne |
| SASS |
2/3 |
2/3 |
2/3 |
ano |
@if, @else if, @else, then |
for, while |
ne |
ne |
ne |
ano |
| Stylus |
1/3 |
1/3 |
1/3 |
ano + @require |
if, else if, else, unless |
for |
ano |
ano |
ano |
ano |
Preprocesor LESS mi sedl nejvíce, jeho syntaxe je naprosto stejná jako v klasickém CSS, proto když jsem s preprocesory před rokem a půl začínal byl přechod velmi snadný. Seznamoval jsem se s funkcemi a postupně je zaváděl do praxe. LESS nemá doladěné pokročilé funkce jako jsou cykly, podmínky, ale v praxi těchto funkcí využijete jen velmi málo. Proto bych se při výběru vůbec nerozhodoval podle seznamu funkcí. V LESS je navíc psaná drtivá většina frameworků (Bootstrap).
Když udělám chybu? Pokud zapomenu například uzavřít element {, LESS vyhodí následují hlášku.
ParseError: missing opening `{` in /Users/martinjinda/Desktop/bp_web/bp_web/www/less/mixiny.less:24:0
23 }
24 }
25
LESS hezky ukáže které závorce chybí uzavření, dohledání je velmi snadné. Pokud zapomenu ;. LESS upozorní na přesném místě v kódu.
ParseError: Unrecognised input in /Users/martinjinda/Desktop/bp_web/bp_web/www/less/main.less:10:0
9 // Resetování defaultních hodnot
10 @import "reset.less"
11
SASS u mě skončil na druhém místě. SASS používá dvě různé syntaxe, jedná se nazývá SASS, nepoužívá střední ani složené závorky a místo toho odsazuje mezerami či tabulátory. Druhou syntaxí je SCSS, která vypadá jako klasické CSS a měly by být i plně kompatibilní (podle oficiální dokumentace), syntaxe je pak uplně stejná jako LESS.
U Stylusu není povinné vynechat speciální znaky, u SASS ano! Nejspíš proto vytvořili druhou syntaxi, která se více blíží k CSS. Pokud jsem chtěl pak využít některé framworky byl třeba napsaný jen v první syntaxi (bez spec. znaků) a stou si SCSS neporadil.
Když udělám chybu,
Syntax error: Invalid CSS after "font-size: 20px;": expected "}", was "" on line 4 of test.scss
Na Stylusu je vidět, že je nejmladší, a že se jeho autor poučil z chyb ostatních. Zároveň implementoval neskutečné množství drobných vychytávek, někdo si to chválí někdo zas ne. Seznam těch nejpoužívanějších.
- mixiny bez zbytečných teček na začátku
- podmíněné styly
- mixing mixins in mixins
- Knihovna NIB (https://github.com/tj/nib), všechny užitečné mixiny na jednom místě
- inlining obrázků do BASE64
- Někdo také ocení vynechání označení proměnných @ a $ nebo mixiny bez teček na začátku.
Pokud jste více programátor, a s CSS si moc netyká volte SASS (SCSS). Pokud vám CSS nedělá problém a rádi si vytváříte vlastní funkce nebo využíváte více programátorských funkcí volte Stylus.