Рубрики
Joomla Верстальщику

Использование LESS при создании шаблонов для CMS Joomla!


Здравствуйте. Сегодняшний материал будет посвящен оптимизации процесса создания шаблонов для CMS Joomla!, причем версия здесь не играет особой роли. Я буду писать все применительно к последней текущей версии Joomla! 1.6, но все что будет сказано можно также применить и при разработке шаблонов для Joomla! 1.5.

Поговорим мы об увеличении производительности написания CSS для шаблонов Joomla! посредством использования CSS-препроцессора LESS. Замечу, что целью данной статьи не является ознакомление читателя с LESS. Все изложенное ниже подразумевает, что у вас уже есть знания базовой работа с LESS. Если нет, то можно сначала ознакомится с этим прекрасным инструментов на сайте проекта lesscss.org.

Отмечу что я давно использую LESS при верстке статических и динамических HTML, но все никак не находил возможности интегрировать его с CMS для которых я верстаю шаблоны (Joomla!, Drupal, WordPress, Magento). И поскольку большая часть работы на данный момент идет именно по CMS Joomla!, то я решил изначально интегрировать поддержку LESS в свои фреймворки для шаблоно Joomla! версии 1.5 и 1.6

Интеграция LESS в шаблоны Joomla!

Для того чтобы интегрировать подержку LESS в шаблоны Joomla! нам нужно решить какой именно компилятор мы будем использовать. Изначально LESS создавался на основе Ruby, позднее появился компилятор для PHPlessphp, и позднее появился LESS для JavaScript — LESS.js. Собственно, если верстать статические HTML страницы, то лично для меня предпочтительнее JavaScript обработчик, поскольку не нужно использовать ни PHP ни Ruby. То есть фактически можно верстать без какого-либо сервера. Но в случае с шаблонами для Joomla! нам желательно все делать непосредственно с северной обработкой, поэтому для этого случае нам предпочтительнее использовать именно LESS компилятор для PHP. А чтобы его использовать нам нужно некоторые предварительные подготовительные работы в нашем шаблоне.

Несколько простых шагов

Итак, изначально, конечно-же, нужно загрузить все необходимое в наш шаблон. Как правило я поступаю так. В директории шаблона делаю отдельную папку «less», в итоге получаем вид пути templates/template_name/less. Здесь мы будем собирать все файлы .less для препроцессора.
Далее, нужно скачать LESS компилятор для PHP на сайте lessphp. И добавить его в ваш шаблон. Лично у меня в шаблоне структура такова: templates/template_name/lib/lessphp и в этой папке находится сам компилятор. Теперь. Нам нужно подключить компилятор и вызвать стили .less в шаблоне.

Руководствуясь инструкциями для PHP компилятора мы должны сделать следующее. В index.php нашего шаблона включить вызов компилятора, исходного файла и итогового файла. Но для начала, поскольку все все наши фалы находятся в пределах одной папки шаблона, руководствуясь правилами хорошего тона в коде, мы должны сделать объявление константы основного пути, для того чтобы безопасно вызвать и добавить нужные нам файлы. Для этого непосредственно в начале index.php шаблона, сразу после проверки доступа нужно добавить строку define( 'YOURBASEPATH', dirname(__FILE__) );, в итоге у вас получится такой вид начала шаблона:

<?php
// no direct access
defined( '_JEXEC' ) or die( 'Restricted access' );
// определяем основной путь
define( 'YOURBASEPATH', dirname(__FILE__) );
?>

Далее, нам следует непосредственно вызвать и обработать стили в .less файле. Допустим у вас есть основной файл разметки layout.less, вызвать и обработать его компилятором можно несколькими путями, а именно тремя, они указаны на сайте lessphp. Лично я предпочитаю использовать вариант, который позволяет скомпилировать итоговый .css файл и положить его в папочку, из которой уже шаблон и будет брать стили. То есть, если вы закоренелый ортодокс и привыкли чтобы у вас файл стилей шаблонов назывался template.css, то этот вариант вам подойдет. И еще он хорош тем, что позволяет в итоге получать нормальный чистый CSS файл, который удобно просматривать дебагером и нет путаницы с номерами строк. Итак, для вызова и компиляции мы будем использовать второй способ из предложенных на сайте lessphp:

// Подключаем компилятор 
require (YOURBASEPATH .DS."lib/lessphp/lessc.inc.php");
// Объявляем переменную которая будет вызывать и обрабатывать .less файл
$less = new lessc(YOURBASEPATH .DS.'less/layout.less');
// Генерируем итоговый .css файл
file_put_contents(YOURBASEPATH .DS.'css/style.css', $less->parse());

Собственно, все что было нужно для использования LESS мы сделал. Теперь остается только стандартным методом подключить нужный итоговый файл стилей в шаблон. Как видно из кода выше, итоговый файл у нас называется style.css, но вы можете его и назвать template.css в итоге получаем:

// Название файла пишу соответственно примера выше где итоговый файл называется style.css  
<link rel="stylesheet" href="<?php echo $this->baseurl ;?>/templates/<?php echo $this->template ;?>/css/style.css" type="text/css" />

Вот и все. На выходе вы имеете сгенерированный .css файл после обработки LESS синтаксиса со всеми его прелестями типа, переменных, наследования, использования mixing (даже не знаю как по-русски сформулировать)… Остается только отметить некоторые важные моменты.

Важные моменты

Думаю, что текста выше было и так непозволительно много, по-этому, лаконично и и по пунктам:

  1. Вы можете использовать привычные правила импорта других .less файлов в ваш основной файл стилей. При этом на выбор дается несколько вариантов синтаксиса:
    @import "file";
    @import 'file.less';
    @import url("file");
    @import url('file');
    @import url(file);

    все это в итоге импортирует файл в основной, но при этом стоит отметить, что в любом случае парсер ищет не .css, а именно .less файл.

  2. Если вы когда-либо пользовались LESS под Ruby, то вам нужно усвоить что в PHP компиляторе есть отличие при разделении правил для mixin’ов, а именно аргументы разделяются с помощью «;», a не «,».
  3. И еще одно… Если вам нужны комментарии в итоговом .css файле, то вам стоит удалить функции очистки комментариев в lessc.inc.php. Допустим, LESS для JavaScript оставляет комментарии.

Остается лишь добавить, что описанный выше метод можно очень просто адаптировать под многие популярные CMS. Кроме того на сайте lessphp есть готовые плагины в частности для WordPress и Symfony FrameWork.

4 ответа к “Использование LESS при создании шаблонов для CMS Joomla!”

« mixing (даже не знаю как по-русски сформулировать)…»
Это функции по сути. На вход передаются параметры, есть параметры по умолчанию, вызываются, возвращают массивы свойств

// Определение
.rounded-corners (@radius: 5px) {
border-radius: @radius;
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
}

// Вызов
#header {
.rounded-corners;
}

Огромное спасибо за статью! Сам давно верстаю статичную вёрстку на less, а вот подключить его к шаблонам php-cms казалось сложной и долгой задачей. Но благодаря этому посту Bitrix и Joomla легко пересаживаются на волшебные возможности от Less!

Спасибо, хорошо изложено.
Я правильно понял, что «// Подключаем компилятор
require (YOURBASEPATH .DS.»lib/lessphp/lessc.inc.php»);» это тоже в файле index.php?
А из скачанного пакета используем только lessc.inc.php?
С уважением

Владимир Давно статья писалась. Сейчас уже очень сложно сказать. Но если вы все еще используете препроцессоры, рекомендую вам взглянуть на PostCSS.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *