Использование LESS в MODx

Blog by admin

Возникла задача использовать LESS в MODx, при этом весьма не хотелось каждый раз после изменения исходного LESS-файла повторно компилировать его вручную, в результате чего и было решено написать соответствующий сниппет. О чем, собственно, и пост.
Прежде всего, качаем LESS-компилятор на PHP – lessphp. Фактически, из всего дистрибутива, нам понадобится один лишь файлик – lessc.inc.php, который мы извлекаем из свежескачанного архива и помещаем в какую-нибудь директорию в assets, например, в assets/libs.

Следующим шагом, создаем в админке MODx сниппет, называем его как-нибудь попонятней, например, includeLess. Ну а дальше все просто, приведу лишь код сниппета. Код прокомментирован, так что разобраться с ним проще простого.

/* путь к директории assets */
$rbBaseDir = $modx->config['rb_base_dir'];
/* подключаем нужный класс */
require_once($rbBaseDir.'libs/lessc.inc.php');
 
if (isset($style)) { // если сниппету передан параметр style
  /* директория LESS-файлов */
  $lessDir        = $rbBaseDir.$templateLessDir;
 
  /* формируем путь к подключаемому LESS-файлу (параметр style) */
  $lessDir        = $lessDir.$style.'.less';
 
  /* путь для CSS-кэша (компилированные LESS) */
  $compiledCssDir = 'cache/css/';
 
  if (file_exists($lessCssPath)) { // проверяем существование LESS-файла
    /* создаем объект LESS-парсера и настраиваем его */
    $lessParser            = new lessc();
    $lessParser->importDir = $lessDir;
 
    /*
     * считываем содержимое подключаемого LESS-файла
     * и компилируем его в переменную $cssSource
     */
    $lessSource = file_get_contents($lessCssPath);
    $cssSource  = $lessParser->parse($lessSource);
 
    /*
     * перезаписываем в скомпилированном CSS относительные пути
     * к файлам (всякие там background-image и т.д.)
     */
    $cssSource = str_replace('url('.$urlsRewriteMatch,
                             'url('.$urlsRewriteReplace.')',
                             $cssSource);
 
    /*
     * получаем MD5-хэш от скомпилированного CSS-кода
     * и формируем имя кэш-файла
     */
    $cssSourceHash   = md5($cssSource);
    $compiledCssPath = $rbBaseDir.$compiledCssDir.$cssSourceHash.'.css';
 
    /*
     * проверка на существование кэш-файла,
     * если нет - создаем его
     */
    if (!file_exists($compiledCssPath)) {
      file_put_contents($compiledCssPath, $cssSource);
    }
 
    /* возвращаем путь к CSS-файлу */
    return 'assets/cache/css/'.$cssSourceHash.'.css';
  }
}

Сниппет имеет единственный параметр – style, определяющий имя подключаемого LESS-файла (без расширения .less (расширение подставляется автоматически), т.е. в случае подключения file.less, вызываем сниппет как [!includeLess? &style=`file`!]).
Сниппет возвращает текстовую строку – путь к CSS-файлу. Пример применения сниппета:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="www.w3.org/1999/xhtml">
<head>
  <link rel="stylesheet" type="text/css" media="screen" href="[!includeLess? &style=`style`!]" />
  ...

После вызова MODx нашего сниппета includeLess, код страницы приобретает следующий вид:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="www.w3.org/1999/xhtml">
<head>
  <link rel="stylesheet" type="text/css" media="screen" href="assets/cache/css/f8c99b14586d8920b693c8cc7f0da6a1.css" />
  ...

Далее, идем в свойства сниппета и в строку «Параметры по умолчанию» засовываем строку:

&templateLessDir=Директория LESS-файлов;text;templates/template/less/ &urlsRewriteMatch=Подстрока для поиска при перезаписи относительных адресов;text;imgs/ &urlsRewriteReplace=Подстрока для замены при перезаписи относительных адресов;text;../../templates/template/imgs/

Сохраняем, видим появившиеся поля-параметры. Заполняем своими значениями.
Не забываем создать директорию assets/cache/css и назначить ей права на запись.