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

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

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

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

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

Для начала нужно установить следующие модули:
drupal.org/project/libraries ^[2]
drupal.org/project/less ^[3]
Затем скачать библиотеку leafo.net/lessphp/ ^[4] и положить ее в папку с библиотеками:
/ваш сайт/sites/all/libraries или /ваш сайт/sites/имя домена/libraries для конкретных сайтов.
В результате файл 'lessc.inc.php' должен быть доступен по адресу:
'/ваш сайт/sites/all/libraries/lessphp/lessc.inc.php' или '/ваш сайт/sites/имя домена/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 будет конвертироваться при каждом обновлении страницы.

Автор: artemln

Источник ^[5]