Используем LESS (динамический CSS) в MaxSite CMS

LESS расширяет возможности создания обычного CSS, по сути превращая его в динамический язык стилевой разметки.

Один простой пример: где-то в css-файле прописаны три основных цвета. Причем во множестве css-свойств. Если нужно сменить цвет, то придется их все найти и вручную поменять. В LESS для этой цели просто задаются переменные, которым присваиваются нужные значения. В css-коде вместо цвета указываем только переменные. Сменили значения переменных - автоматом поменялись цвета и в результирующем css-коде.

LESS имеет еще множество других полезных возможностей, например упрощенный стинтаксис, примеси, функции т.п. При этом LESS полностью совместим с синтаксисом CSS.

Полное описание возможностей LESS находится на официальном сайте (русская версия - только немного устаревшая).

LESS - только один из множества подобных разработок.

Рассматривать возможности LESS я здесь не буду - существующей документации более чем достаточно. Сегодня речь пойдет об интеграции LESS в MaxSite CMS.

Подключение LESS

Стандартно LESS подключается в виде обычного js-файла в секции HEAD-страницы. Вначале подключается less-файл, после этого компилятор less.js. Вот примерно так:

<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>

Здесь главное условие, чтобы компилятор был подключен после всех less-файлов.

Подключение в шаблоне MaxSite CMS происходит в файле custom/head.php. Этот файл автоматически подключается в секцию HEAD шаблона. Итак нам нужны файлы:

• Последняя версия less.js, который необходимо скачать с официального сайта. Сохраним его в каталоге шаблона /css/.
• Какой-то тестовый less-файл, пусть он будет в каталоге шаблона css/styles.less.

Скопируем из default-шаблона custom-файл _head.php. Это заготовка для head.php.

Подключаем файлы в custom/head.php.

mso_add_file('css/styles.less');
mso_add_file('css/less.js');

В файле css/styles.less напишем что-нибудь вроде такого:

body {background: red;}

Если всё нормально, то цвет фона сайта станет красным.

Всё! Теперь можно в css/styles.less использовать LESS в полном объеме.

Проблемы компиляции на стороне клиента

Данный вариант подключения называется «на стороне клиента». То есть less-код выполняется браузером посетителя. Минусы тут следующие:

• Обязательное выполнение js-кода браузером. Если отключить выполнение скриптов, дизайн сайта развалится.
• Поскольку компиляция css-стилей выполняется через js, то это дополнительные тормоза при отображении страницы. Если FireFox и Chrome достаточно быстро выполняют js-код, то другие браузеры сильно от них отстают.

По этим причинам желательно всё-таки отдавать посетителю уже готовый css-файл, а на этапе разработки использовать less-файл.

Компиляция less-файла

Схема довольно простая. Есть некий less-файл (или набор less-файлов). В них вебмастер ведёт разработку сайта. Сайт расположен на локальной машине, поэтому никаких проблем с подключением less.js не существует.

После того, как работа выполнена следует скомпилировать less-файл в обычный css-файл. Понятно, что less.js совершенно не подходит, поскольку выполняется в браузере. Нам же нужно указать один файл - на выходе получить другой.

Для нашей задачи вообще было бы замечательно автоматизировать процесс как компиляции less-файлов, так и подключения готового css-файла в секцию HEAD шаблона.

Для решения этой задачи я воспользовался lessphp - это PHP-библиотека, которая полностью выполняет поставленную задачу.

Подключение LESSPHP

Воспользуемся новой возможностью MaxSite CMS (версия 0.63) - автоматическое подключение css/var_style.php. Если этот файл не найден, то происходит подключение css/var_style.css - файл стилей («переменной» css-части).

В файле css/var_style.php мы выполним компиляцию less-файла и по результату вернем обычное подключение var_style.css.

Перед началом работ удалите файлы предудущего примера. Подключение в custom/head.php будет не нужно.

Наши действия следующие:

• Находим файл default/css/less/compiling-less.zip. В нем готовый var_style.php.
• Распаковываем файл в каталог шаблона /css/.
• Файл var_style.css будет создаваться автоматически. Его трогать не нужно! Единственный момент, может потребоваться установить для него права на запись (666).
• Файл var_style.less будет рабочим - именно здесь и нужно указывать все стили.

Теперь, при каждом обновлении страницы сайта, будет автоматически генерироваться var_style.css из var_style.less.

LESS на рабочем сайте

Постоянная компиляция на рабочем сайте не имеет смысла. Поэтому, после отладки на рабочий сайт загружается только готовый var_style.css, причем файл var_style.php может отстутствовать.

Если клиенту требуется предоставить исходные less-файлы, то можно скопировать их отдельно.

Дополнительные плюшки

В var_style.php можно задать режим сжатия css-кода и использование кэша, чтобы файл не компилировать при каждом обновлении страниц сайта.

LESS с помощью программы WinLess

Еще один вариант компиляции less-файлов - это использование программы WinLess. В этом варианте вообще не требуется никаких движений по установке дополнительных файлов.

Первым делом скачиваем и устанавливаем на свой компьютер WinLess. Запускаем, и добавляем в каталог с less-файлами (кнопка Add folder или перетащить каталог мышью).

Обратите внимание на несколько моментов.

• Отмечать для компиляции нужно только главный файл. Остальные less-файлы как правило подключаются прямо в нём директивой «@import». Поэтому делать из них css-файлы не нужно.
• Для поля Output file нужно указать css-каталог шаблона. Если этого не сделать, то результирующий css-файл будет создан в том же каталоге, где и less-файл.

После этих несложных настроек, программа будет отслеживать все изменения в less-файлах и автоматически компилировать css-файл.

Можно отключить автоматическую компиляцию в настройках программы - «Automatically compile files when saved».

Если в процессе компиляции возникла ошибка, то программа в трее высветит подсказку, где можно будет увидеть строку, где возникла ошибка. Эта же самая подсказка доступна на вкладке «Compiler».

Программа в своей работе использует нативный less.js. В комплекте идет устаревшая версия, поэтому можно заменить этот файл на новый самостоятельно.