LESS.js — таблицы стилей без бардака

Вчера встретил статью про язык расширения каскадных таблиц стилей — LESS — ну и, разумеется, попробовал применить его в текущем проекте. Результат меня не просто обрадовал, а привёл в дичайший восторг. В современном CSS мне очень не хватало следующих вещей:

1. Определения констант для цветов. Во многих проектах дизайн делается в одной палитре и её достаточно задать один раз в начале таблицы стилей. Опять же, существенно упрощается изготовление различных цветовых схем для сайта. Тут всё это есть:

@color: #4D926F;
#header { color: @color; }

2. Ужасно надоедало писать бесконечные таблицы стилей для поддержки разных браузеров. Вот, пожалуйста:

.rounded-corners (@radius: 5px) { 
  border-radius: @radius; 
  -webkit-border-radius: @radius; 
  -moz-border-radius: @radius; 
} 
#header { .rounded-corners; }

3. Стили имеют свойство расползаться,  а теперь их можно очень удобно сгруппировать в древовидном порядке:

#header { h1 { font-size: 26px; font-weight: bold; } }
a { color: red; &:hover {color: blue;} }

Похоже, что разработчики столкнулись с общими для всех проблемами и сделали эффективное и удобное решение.

Конечно же, это не всё и на сайте проекта есть множество примеров по всем возможностям этой технологии. Теперь посмотрим, как использовать LESS в проектах на Zend Framework.

Во время разработки LESS логично подключить как обычный JavaScript файл и компилировать стили на клиентской стороне. Перекомпилировать отдельно при каждом изменении слишком накладно.

А вот при развёртывании проекта правильнее один раз скомпилировать стили и выложить их на сервер уже в формате CSS. 

Для реализации этой схемы я сделал ViewHelper похожий на HeadScript и HeadLink:

Скачать исходники HeadLess.php

Пример использования:

<?php
$this->headLess()->setJs($url->static . '/js/less-1.1.3.min.js');
$this->headLess()->appendStylesheet($url->static . '/css/style.less');
?>
<?= $this->headLess() ?>

Если установлена переменная окружения APPLICATION_ENV == 'development', то в код страницы добавится стиль в формате .less и JavaScript для его компиляции. В противном случае используется стиль .css.

Чтобы эта схема работала и в Production окружении, нужно при развёртывании сайта сконвертировать все .less скрипты в .css. Я это делаю так:

for file in $(find ~/.deploy/$project/ -name *.less); do echo $file; lessc $file > "`dirname "$file"`/`basename "$file" .less`.css"; rm $file; done;

Разумеется, перед этим необходимо установить node.js и less на машине, которая будет делать развёртывание проекта.