Używanie preprocesorów jest bardzo korzystne ze względu na lepsze wykorzystanie czasu developera i zmniejszenie nakładu pracy tegoż. Dlatego też jak najbardziej chwalebny jest Twój (jak zakładam) zamiar korzystania z jednego z nich.
Odpowiedź na pytanie jest jednoznaczna: Sass.
Oba języki nadają się do użytkowania i usprawniają pracę webdevelopera przy pomocy takich narzędzi jak zmienne, pętle, wyrażenia logicznie (if) czy zagnieżdżanie i rozszerzanie selektorów. Jednakże komfort korzystania z nich może się mocno różnić zależnie od języka.
Mimo, iż Less jest uznawany za łatwiejszy dla początkujących ze względu na większe podobieństwo do czystego CSSa, to Sass jest zgodnie polecany przez rzesze profesjonalistów. Oto dwa główne powody:
- Wyrażenia logicznie (if)
W obu językach są one osiągalne, jednak ich intuicyjność i przejrzystość znacząco się różni. I tak w Sass mamy do czynienia ze znajomą (dla programistów*) składnią:
@if(lightness($colour) > 40%) {
background-color: #000;
}
*Nie martw się, jeżeli nie jest dla Ciebie znajoma - jest ona spotykana w wielu innych językach i na pewno natkniesz się na nią prędzej czy później.
Natomiast w Less efekt ten osiągamy przez użycie tzw. „guarded mixin” (nie podejmę się tłumaczenia na polski). Ich działanie jest identyczne, jednak składnia jest nieco zagmatwana:
.lightswitch(@colour) when (lightness(@colour) > 40%) {
background-color: #000;
}
- Pętle
Sass posiada pełen zestaw pętli, wśród których znajdziemy for, while, czy each (odpowiednik foreach z PHP czy for in z JavaScriptu), które spełniają swoje zadania bez żadnych zastrzeżeń:
@each $beer in stout, pilsner, lager {
.#{$beer}-background {
background: url("../img/beers/#{$beer}.png") no-repeat;
}
Less nie posiada dedykowanych pętli. Pożądany efekt można uzyskać przez używanie funkcji rekursywnych:
.looper (@i) when (@i > 0) {
.image-class-@{i} {
background: url("../img/@{i}.png") no-repeat;
}
Sass daje nam na tym polu dużo większe możliwości.
Warto zauważyć, że Sass nie jest ideałem. W korzystaniu z niego pewną barierę może stanowić nieco skomplikowana konfiguracja początkowa i konieczność korzystania z wiersza poleceń. Jeżeli jednak pokonamy te początkowe trudności, preprocesor ten otworzy przed nami ogrom możliwości.
Jako że skupiłem się tutaj tylko na różnicach między obiema technologiami, a nie na samej funkcjonalności (która w dużej mierze jest podobno) zapraszam do zapoznania się z poradniakami oraz dokumentacją:
Sass:
http://sass-lang.com/guide - oficjalny poradnik
http://sass-lang.com/documentation/file.SASS_REFERENCE.html - oficjalna dokumentacja
http://www.zingdesign.com/the-sass-and-compass-tutorial-for-absolute-beginners/ - poradnik dla początkująch
http://webroad.pl/html5-css3/657-1-sass-compass-instalacja-i-podstawowe-komendy - poradnik instalacji Sass po polsku
http://blog.eduweb.pl/wprowadzenie-do-preprocesorow-css/ - wprowadzenie do preprocesorów po polsku
Less:
http://lesscss.org/ - pierwsze kroki z Less
http://lesscss.org/features/ - dokumentacja dotycząca możliwości języka
http://www.hongkiat.com/blog/less-basic/ - poraadnik dla początkujących
http://burczu-programator.pl/blog/wprowadzenie-do-less - wprowadzenie do korzystania z Less w języku polskim
Wykorzystane przykłady pochodzą z artykułu http://www.zingdesign.com/less-vs-sass-its-time-to-switch-to-sass/.
