xandeadx.ru Блог музицирующего веб-девелопера

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 файлов — вэлкам в комментарии.

Похожие записи

Комментарии RSS

Я пользуюсь scss в темах на основе zen, но для организации файлов это непринципиально. В zen используется методология smacss, что по большей части определяет всю структуру css, на которую так же органично ложатся и препроцессоры. На мой взгляд, в болшинстве случае, следование подходам smacss является гарантией чистоты кода и расширяемости.

Я использую LESS, по принципу подключаю 1-н файл LESS в него все остальное. Компилирую в CSS только в конце при сдачи проекта, до этого подключаю библиотеку less-1.3.3.min.js, позволяет регенерировать файлы LESS на стороне браузера, очень удобно что не нужно перезагружать страницу. В нормальных браузерах есть плагины позволяющие дебажить LESS как CSS.

Я использую http://livereload.com/
Подключаюсь к удалённой машине по sftp, редактирую css/less/sass файлы в локальном редакторе (Sublime), при сохранении файла он также конвертируется в css и тоже сохраняется на сервере, при этом происходит обновление в браузере без перезагрузки страницы.
Из минусов - только одностороння связь редактор - браузер, а в идеале хотелось бы а-ля http://livestyle.emmet.io/, но идеала не бывает )

Насколько я знаю - LESS компилятор в статье не очень дружит с LESS файлами бутстрап темы. А вот этот https://github.com/leafo/lessphp очень даже дружит. Полностью совместим с модулем LESS для друпала, но более функционален.

Не получается подключить less.js, может кто подскажет, вроде все правильно делаю

Написал на своем блоге статью как еще можно подключить это дело к Друпал http://sirega.ru/kak-podklyuchit-less-k-drupal.html

Для sass тоже есть source-maps
Debugging SASS with Chrome Dev Tools

Пользуюсь в Омеге (хотя там надо немного подпатчить)
Add source maps to Omega 4.x projects

Оставить комментарий

Содержимое этого поля является приватным и не будет отображаться публично. Если у вас есть аккаунт в Gravatar, привязанный к этому e-mail адресу, то он будет использован для отображения аватара.
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Доступные HTML теги: <a> <i> <b> <strong> <code> <ul> <ol> <li> <blockquote> <em> <s>
  • Строки и параграфы переносятся автоматически.
  • Подсветка кода осуществляется с помощью тегов: <code>, <css>, <html>, <ini>, <javascript>, <sql>, <php>. Поддерживаемые стили выделения кода: <foo>, [foo].

Подробнее о форматировании