SASS или LESS - това е въпросът!

"Кой CSS препроцесорен език да избера?" е един от най-честите въпроси, който може да си зададе един начинаещ уеб дизайнер, като най-често дилемата е между SASS (syntactycally awesome stylesheets) и LESS.

Най-краткият отговор е: SASS

Не-чак-толкова краткия отговор: SASS има предимства в редица аспекти пред LESS, но ако сте запознати добре с LESS може да постигнете чудесни резултати в препроцесинга и с него.

А за да разберете най-дългия отговор - просто продължете да четете. Но преди да пристъпим към същинската част:

Какво всъщност е CSS Препроцесор?

Писането на CSS код може да е доста монотонно и повторяемо действие и малките задачки като проверката на hex стойностите на цветовете, дали таговете са затворени и ако не - къде не са и т.н. могат да се превърнат в истинска черна дупка, която безмилостно поглъща вашето време. Ето тук влиза в действие препроцесора. В основата си CSS препроцесора е скриптиращ език, който допълва CSS и се компилира в обикновен CSS код.

По Шекспир: SASS или LESS - това е въпросът!

Проучване на keycdn.com показва, че при допитване до 1050 души, 66% от тях предпочитат SASS, едва 13,4% - LESS, 13,5% не използват препроцесори, 4,2 % използват Stylus, а останалите 2,9% използват някакъв друг препроцесор.

И двата езика, обект на настоящия материал - SASS и LESS са много силни CSS допълнения. И двата езика имат добра обратна поддръжка, така че винаги можете да отворите съществуващ .css файл и да работите върху неговия код със SASS или LESS, единствено като промените разширението на файла - съответно .sass или .less. И двата езика са предназначени да направят CSS по-лесен за поддръжка. 

LESS е базиран на JavaScript, докато SASS е базиран на Ruby

SASS има по-добри възможности като програмен език.

Сравнявайки двата езика бих искал да уточня, че SASS е по-близо до програмирането. Има if/else конструкции, "for" цикли, "while" цикли и др. Да, Less също има сходни свойства, но SASS поддържа по-голямо разнообразие що се касае до математическите формули, по-добър selector nesting, което ще ви помогне да поддържате своите стилови листове по-лесно в съответствие с DRY принципа. Като цяло SASS е доста по-напред по отношение на свойства и възможности, спрямо LESS. Отделно ако сте запознати с JavaScript или Ruby, SASS няма да ви изненада с нещо изключително непознато, просто ще трябва да използвате познатите неща във вашите стилови листове.

SASS има Compass

Compass е изключително популярна open-source CSS authoring framework. Или казано на човешки език Compass е софтуерна рамка, която върви в комплект със SASS. Каква е разликата между обикновен framework и authoring framework?

Стандартният CSS framework (в повечето случаи) е фиксиран набор от основни CSS дефиниции.

CSS authoring framework-a (в случая с Compass) ни дава един нефиксиран набор от CSS дефиниции.

Обратно на стандартната софтуерна CSS рамка, authoring ни помага да напишем CSS правила с различни helpers - за сметка на това обаче всяка една CSS дефиниция трябва да бъде написана собственоръчно. Няколко думи за т.нар. "хелпъри": Compass ви помага, като автоматично поправя някои общи проблеми с браузърите (като например IE floats) и прочее. Основният проблем с Compass се състои в това, че е труден за начинаещите. Освен Compass има и други библиотеки/софтуерни рамки, които можете да ползвате за SASS. Такива са налични и за LESS също, но никоя от тях не може да се мери по популярност и функционалност с Compass.

Това обаче съвсем не означава, че LESS не струва.

LESS се появява 3 години след SASS, през 2009 г. и абревиатурата означава "Lean CSS". Първото нещо, с което LESS превъзхожда SASS (поне в очите на начинаещите програмисти) това е далеч по-лесното настройване на езика. LESS използва JavaSctipt. И при двата препроцесора главната работа се извършва с командната конзола, но и за двата има различни GUI компилатори. Също така всеки Windows има по подразбиране инсталиранa поддръжка на JavaScript, докато Ruby (езика на SASS) не е по подразбиране и настройването може да е малко трудно.

Less е като "помощни колела". Синтаксиса на LESS е по-близък до стандартния CSS код, което е доста подходящо за начинаещи, които искат да "превключат" от стандартен CSS към препроцесорен език.

Основната разлика между SASS и LESS

Разликите между двата препроцесорни езика не са големи, но все пак такива има. Ето няколко ключови разлики:

1. Както вече казах по-нагоре LESS върви под JavaScript, докато SASS е на Ruby. Най-голямата разлика тук се обуславя от инсталацията и настройките, като и за двете има приличен набор GUI компилатори. Затова това не може да е фактор, когато избирате кой от двата езика да използвате.
2. LESS няма такава поддръжка на софтуерни рамки, като Compass за SASS. В допълнение може да се каже, че доста хора използват SASS именно заради Compass.
3. Начинът по който изписвате променливите е различен, макар това да не е твърде отличителна черта. И двата езика съхраняват стойностите по един и същи начин, те просто използват различни символи. SASS използва $, докато LESS използва @. В същото време ако използвате LESS може да настъпи малко объркване по отношение на този символ, тъй като в стандартния CSS код се използва с друго значение - като например "@media queries" или "@keyframes", докато в CSS знакът за долар няма друго приложение.
4. Циклите в LESS разрешават само употреба на цифрови стойности. В SASS можете да завъртате в цикъл всякакви видове данни. Но в LESS можете да съставяте цикли чрез употреба на  цифрови стойности с рекурсивни функции. А да можете да завъртате в цикъл всякакъв вид данни е далеч по полезно. Още една точка за SASS.
5. Нестингът на SASS е по-добър. И двата препроцесорни езика го позволяват, но SASS е стъпка напред в това отношение, позволявайки ви да нествате индивидуални свойства.

Научете повече за SASS и LESS в новото обучение"JavaScript for Front-End - октомври 2017", което стартира след броени дни. Ще наблегнем на фундаменталните неща, нужни за изграждането на Front-End частта на едно web приложение. Разглеждат се и някои от най-популярните инструменти за стилизация като Bootstrap и CSS препроцесори. Повече за курса вижте ТУК.

Автор: Георги Кацаров