Используем less на Drupal

LESS - это собственный язык стилевой разметки, который расширяет способности стандартного css.
Подробнее про less вы можете прочитать на официальном сайте проекта, там есть замечательные примеры его использования.

На less уже написаны множество библиотек, получивших огромную популярность. К примеру, такие, как twitter bootstrap или semantic grid system.


Чтобы использовать этот язык и применять его в своих проектах на Drupal нужно научить браузер понимать файлы с расширением *.less . Для это есть небольшой js файл less.js, который подключается после файлов со стилями. (На самом деле этот js не “учит” браузер понимать файлы с неизвестным расширением. Он просто конвертирует в простой css файл) В этом есть и плохая сторона. Это уменьшает время прорисовки страницы. Поэтому есть еще один вариант - конвертировать на стороне сервера, а браузер будет принимать обычный css файл.

Далее я расскажу как конвертировать less на сервере, при использовании CMF Drupal.

Для начала нужно установить следующие модули:
http://drupal.org/project/libraries
http://drupal.org/project/less
Затем скачать библиотеку http://leafo.net/lessphp/ и положить ее в папку с библиотеками:
/<ваш сайт>/sites/all/libraries или /ваш сайт/sites/<domain>/libraries для конкретных сайтов.
В результате файл 'lessc.inc.php' должен быть доступен по адресу:
'sites/all/libraries/lessphp/lessc.inc.php' или 'sites/<domain>/libraries/lessphp/lessc.inc.php'.
После того как установили php библиотеку включаем скачанные ранее модули.

Теперь вы можете в info файле вашей темы спокойно подключать файлы less:
stylesheets[all][] = less/common.less
Как видно в этом случае работает правило @media для вариантов:
all - применять везде
screen - применять только при просмотре web страницы
print - применять только при печатной версии.

Давайте теперь разберемся с подключением библиотек написанных на less. Буду рассматривать этот пример с использованием semantic grid system :

Сначала создадим следующую структуру папок:

папка темы
-less
--libraries
---grid
В папку grid положим файл фреймворка grid.less
А в папку less 2 файла:
custom.grid.less (Сама разметка страницы)

@columns: 12;
@column-width: 60;
@gutter-width: 20;

article {
  .column(9);
}
section {
  .column(3);
}


common.grid.less (подключение библиотеки и пользовательских файлов, его мы и будем подключать в теме)

@import 'libraries/grid/grid.less';

@import '../../custom.grid.less';

Прошу обратить внимание на то, что при подключении нескольких файлов и использовании относительных путей каждый следующий файл необходимо указывать относительно подключенного файла перед ним.

После очистки кэша подхватится наш less файл и конвертируется в css. При каждом следующем обновлении страницы less обрабатываться не будет.

Для сброса less кэша нужно перейти на страницу admin/config/development/less и нажать на кнопку “Flush LESS files”. При разработке будет полезна галочка “LESS developer mode” - при включении которой less будет конвертироваться при каждом обновлении страницы.