Краткий обзор отличий LESS от SASS

Вчера пол дня потратил на подробное изучение LESS и его отличие от используемых нами SASS/SCSS.



Синтаксис SASS мне импонирует больше чем SCSS за его краткость. Но большая вложенность стилей в SASS может быстро ликвидировать все преимущества его краткости. В любом случае разницу между SASS и SCSS не принципиальна. LESS оказался ближе к SCSS чем к SASS. И, в общем, это тоже самое. Отличий не много, но парочка из них принципиально меняют расстановку сил.

1. LESS — может client-side с использованием JS.

Точнее он не то чтобы может, он на это и расчитан. Обычная практика использования LESS-кода:

<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>

Это потом уже к нему прикрутили возможность компиляции на сервере (и на js и на ruby).



На первый взгляд какое-то странное свойство. Зачем компилить на стороне клиента, если можно отлично скомпилить на сервере и отдавать уже готовую ужатую CSS как мы привыкли с SASS?



Причина становится видна после изучения невзрачных самых послених строках документации к LESS:



@height: `document.body.clientHeight`;



Вот такая маленькая одинокая строчка дает возможности о которых только мечтали верстальщики с начала освоения стилей. Вызов из CSS ява-скрипта на стороне клиента и учет фактических параметров браузера при создании стилей.



Тоесть у нас появилась возможность сначала загрузить DOM, а потом под него создать специальный CSS прямо на стороне клиента. Дальше сами думаейте какие возможности этот открывает.



Нужно ли это вашему проекту это вопросу другой. Понятно что все привыкли к клиентской неизвестности/независимости и верстке в стиле «делаем универсально, чтобы более-менее показывалось у всех на всех разрешениях». Но это не повод забывать что теперь такая возможность есть и с ней вы можете делать, к примеру, ну очень резиновую верстку.

2. LESS, в отличии от SASS/SCSS не имеет логики.

В LESS нет if/then, for и т.п. Хотя, учитывая то, что в него легко встраивается JS думаю логику вполне возможно прикрутить. Не пробовал.

3. В LESS проще миксинг + миксить можно классы.

Очень понравилось то, что в LESS можно включать в определение свойства других классов. Собственно класс и является миксином. Это еще одна особенность которой нет в SASS/SCSS. Вы можете включить в LESS обычный CSS файл и использовать его классы для определия своих свойств. Например:



.wrap {

text-wrap: wrap;

white-space: pre-wrap;

white-space: -moz-pre-wrap;

word-wrap: break-word;

}

pre { .wrap }


Резюме

За исключением 1-го пункта разница не велика и выбор большена любителя.



Лично для меня LESS выглядит более привлекательным из-за своей простоты. Циклы и условия в стилях мне еще никогда не были нужны. Классические утилиты типа «box-shadow, linear-gradient, darken' в LESS есть.



Да, под SASS написано уже множество готовых библиотек (compass, bourbone и достаточно широкое сообщество), но под LESS есть тот же Twitter Bootstrap и этого более чем достаточно.



P.S. Нашел старницу сравнения SASS vs LESS и вместе с ней открыл для себя любопытный сервис аргументированных сравнений wrangl.com

Источник: Хабрахабр - Веб-разработка
Оригинальная страница: Краткий обзор отличий LESS от SASS