1С-Битрикс. Компонент для генерации css из sass, scss
Понадобилось прикрутить к Битриксу Sass. Sass — это такой язык на основе CSS, добавляющий всякие полезные функции в CSS.
При беглом гуглении даже близко ничего похожего не было.
Так появился компонент для компиляции Sass/Scss/LESS в Битрикс.
Для парсинга sass файлов была выбрана библиотека PhamlP.
Получился довольно гибкий компонент. Можно также реализовать, например, компиляцию less файлов. Для этого нужно написать класс, например, LessCompiler. Унаследовать его от класса Compiler, реализовать в нем метод toCss($file) и сохранить в папке с компонентом под одноименным названием. И в вызове компонента параметром CLASS_HANDLER указать LessCompiler.
Пример использования:
$APPLICATION->IncludeComponent("we:csscompiler", ".default", array( "PATH" => "/bitrix/templates/main/sass/", "PATH_CSS" => "/bitrix/templates/main/", "FILES" => array( 0 => "styles.sass", ), "CLASS_HANDLER" => "SassCompiler", "USE_SETADDITIONALCSS" => "Y", ), false, array("HIDE_ICONS" => "Y") );
Обновление от 09.09.13
Добавил scssphp http://leafo.net/scssphp
Обновление от 28.09.14
Переписал и отправил модуль на модерацию в маркетплейс. После одобрения напишу новую заметку.
Исходный код на GitHub.
10 комментариев
Круто! Заценю на досуге! Полезная вещь)
Олег, данный компонент повесил апач при попытке скомпилировать scss исходники bootstrap. Увы не юзабельно :(
m1skam, компонент работает на нескольких проектах, проблем не замечали.
С каким компилятором запускали? Мы используем scssphp
Возможно ли использовать ваш компонент для css файлов шаблонов компонентов типа /local/templates/ant/components/bitrix/news.list/front-blocks/style.css ?
Антон, а зачем компонент использовать для .css файлов?
Точнее будет так: /local/templates/ant/components/bitrix/news.list/front-blocks/style.scss
Как можно использовать scss, например, в news.list шаблоне? Т. е. не в списке заранее известных файлов типа /local/templates/ant/template_styles.css /local/templates/ant/styles.css
А в разных компонентах, которые на одних страницах есть, а на других страницах их нет)
Или предполагается отказаться от стилей внутри компонентов и вынести весь код стилей в шаблон сайта и подключать его ко всем страницам?
Да, в данном в случае весь код стилей надо выносить в общий шаблон сайта. Из коробки, красиво, битрикс не даёт способа получить все файлы добавленные методом $APPLICATION->AddHeadScript().
Не обязательно хранить всю кашу в одном файле. Можно разбивать файлы на сущности и инклюдить в общем файле .scss
Понял. Спасибо за ответы и за сам модуль!
Здравствуйте, пытаюсь запустить less на вашем компоненте, выдает ошибку:
Что я не так делаю?
Продиагностировал проблему: у Александра стоял модуль, который уже подключал lessphp. Отключили модуль и проблема решилась.