Drupal → Использование CSS-препроцессора LESS

Что это?

LESS — это CSS-препроцессор, расширяющий язык CSS поддержкой переменных, примесей (миксинов), функций и многих других вещей, которые позволяют писать CSS быстрее, а HTML код делать чище.

У LESS css-совместимый синтаксис, это значит что любой валидный CSS код будет валидным LESS-кодом.

Почему LESS, а не SASS/SCSS?

Для друпала только он имеет модуль с поддержкой source maps, помогающий дебажить результирующий css-код в браузере. Плюс указанный модуль не требует отдельной установки и настройки компилятора.

Как установить?

1. Скачать компилятор и распаковать так, чтобы файл lessc.inc.php оказался по адресу sites/all/libraries/lessphp/lessc.inc.php.

2. Скачать и включить модули LESS CSS Preprocessor, Libraries API.

3. На странице admin/config/development/less выбрать LESS engine равным less.php и включить опции Developer Mode, Source Maps (скриншот). На живом сервере опцию Developer Mode следует отключить.

Как пользоваться?

Подключать как обычный css в .info файле stylesheets[all][] = style.less или drupal_add_css(path_to_theme() . '/style.less'); в php коде.

При добавлении нескольких less файлов через stylesheets[all][] или через drupal_add_css() в них будут недоступны переменные и миксины из соседних файлов. Поэтому рекомендуется подключать только один less файл, а уже в нём с помощью @import подключать остальные:

themename.info

stylesheets[all][] = all.less

all.less

@import "vars.less"; 
@import "mixins.less";
@import "layout.less";
@import "style.less";
// ...

Область видимости переменных и миксинов не зависит от порядка подключения файлов через @import.

Если всё же нужно использовать классы из css/less файла подключённого из другого модуля или базовой темы, то можно сделать так:

@import (reference) "../../base-theme/css/style.less"; 

Опция (reference) говорит о том, что нужно подключить файл, но не выводить его содержимое (подробнее).

Из-за совместимого синтаксиса можно не боясь переименовать .css файлы в .less и начать пользоваться новыми возможностями языка.

Кто желает поделиться своим способом организации less файлов — вэлкам в комментарии.