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

Просмотров: 303Комментарии: 0
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-части).

В версии MaxSite CMS 0.70 компилятор LessPHP работает на уровне ядра системы. Для компиляции используется функция mso_lessc(), которая полностью берёт на себя всю работу.

В файле 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.

Теперь, при каждом обновлении страницы сайта, будет автоматически генерироваться 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 или перетащить каталог мышью).

WinLess

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

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

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

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

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

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

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

Комментарий будет опубликован после проверки

Вы можете войти под своим логином или зарегистрироваться на сайте.

(обязательно)

РЕКЛАМА
Создание сайта: Site Help |

О проекте

MaxSite CMS предназначена для создания сайтов любой сложности. Система отлично подходит обычным пользователям, вебмастерам, фрилансерам и вебстудиям.