Используем LESS и SASS в Drupal

Препроцессоры Less и Sass, на мой взгляд, это какая то переходная ступень. Со временем, я надеюсь, функционал расширений будет реализован в CSS. Но ждать нам некогда, использовать все удобства препроцессоров можно и нужно уже сейчас.

В Drupal использование LESS и SASS реализовано привычным образом : требуется установить соответствующие компоненты (модули и библиотеки), и станет возможным использование файлов .less и .sass точно также как вы работаете с обычными каскадными стилями в вашей теме.

SASS под Drupal

Скачайте три модуля:

  • https://www.drupal.org/project/sassy — SASS для друпал
  • https://www.drupal.org/project/prepro — Препроцессор
  • https://www.drupal.org/project/libraries — API для библиотек

И обязательно нужно будет установить саму библиотеку PHPSASS, взять её можно вот от сюда — https://github.com/richthegeek/phpsass

Модули пишем в папку /sites/all/modules/ вашего проекта (drupal 7). А библиотека копируется в папку /sites/all/libraries/phpsass/.

Модуль Sassy находится в группе theming tools, активируйте его и переходите к настройкам препроцессора /admin/config/media/prepro.

Здесь вы можете выбрать настройки чем обрабатывать .sass, scss файлы и режим кеширования.

Теперь вы можете подключать в .info ваших тем файлы с расширениями .sass и .scss. Они будет отправляться в препроцессор.

LESS под Drupal

Less подключить ещё проще, чем Sass, т.к. требуется установка меньшего числа компонентов.

Потребуется два модуля :

  • https://www.drupal.org/project/less — less для друпал
  • https://www.drupal.org/project/libraries — API для библиотек

И нужно установить библиотеку LESSPHP, взять её можно здесь — https://github.com/oyejorge/less.php.

Модули пишем в /sites/all/modules/ вашего проекта (drupal 7). А библиотека копируется в папку /sites/all/libraries/lessphp/ так чтобы файл lessc.inc.php был вот тут:

Активируйте модуль LESS, он находится в группе others (прочие модули). Переходите к его настройками /admin/config/development/less.

Т.к. мы использовали библиотеку less-php, то нужно выбрать первый пункт в LESS engine и сохранить настройки.

Модуль позволяет подключать .less файлы как через .info файл шаблона, так и в момент обработки команды drupal_add_css().

Написать комментарий

Мало букафф? Читайте есчо !

Вставка переменной в инлайновое изображение в LESS

Август 29, 2019 г.

Небольшие векторные элементы очень удобно вставлять как часть CSS кода. Хочу показать пример, как сделать их еще и параметрически зависимыми, при компиляции из LESS. К примеру, при ребрендинге или использовании кусочка стилей на другом сайте, вы ...

Читать

Сложение строк в LESS

Апрель 4, 2019 г.

Функции вроде concat у less нет, но есть возможность подстановки переменных в строковою константу. Этим мы и воспользуемся. Начну с примера, чтобы показать некоторые нюансы. Допустим, мы хотим задать выражение вроде: [crayon-662a00bba7937330435381/] ...

Читать

 

Комментарии к «Используем LESS и SASS в Drupal»

Понравилась статья? Есть вопросы? - пишите в комментариях.



Комментарий:

Много комментариев в “Используем LESS и SASS в Drupal”

  1. санек:

    Да я так и не смог найти lessc.inc.php