Опубликовано автор в категориях 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!”

  1. Иван

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

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

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

    Ответить
  2. Egor

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

    Ответить
  3. Владимир

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

    Ответить
    • Hiway

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

      Ответить

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

  • (не будет показан)