- PVSM.RU - https://www.pvsm.ru -
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]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/less/31176
Ссылки в тексте:
[1] официальном сайте проекта: http://lesscss.org/
[2] drupal.org/project/libraries: http://drupal.org/project/libraries
[3] drupal.org/project/less: http://drupal.org/project/less
[4] leafo.net/lessphp/: http://leafo.net/lessphp/
[5] Источник: http://habrahabr.ru/post/158541/
Нажмите здесь для печати.