Записки программирующего руководителя

ruby, управление, проекты и мечты
Oct 21

LESS и SASS

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

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

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

Точнее он так и спроектирован, это потом уже к нему прикрутили возможность компиляции на сервере а-ля sass. На первый взгляд какое-то странное свойство. Зачем компилить на стороне клиента, если можно отлично скомпилить на сервере и отдавать уже готовую ужатую CSS? Причина зачем это может понадобится кроется в невзрачных самых послених строках документации.

@height: `document.body.clientHeight`;

Вот такая маленькая одинокая строчка дает возможности о которых только мечтали верстальщики с начала освоения стилей. Вызов из 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 }
Итоги
Лично для меня LESS выглядит более привлекательным из-за своей простоты. Циклы и условия в стилях мне еще никогда не были нужны. Классические утилиты типа "box-shadow, linear-gradient' в LESS есть. Под SASS написано уже множество готовых библиотек (compass, bourbone и т.п.), но под LESS есть тотже Twitter Bootstrap и этого более чем достаточно.
А в общем - на любителя. Но не забывайте про пункт 1 - в этом случае только LESS.