Компилятор SASS/SCSS

100 - 499 раз установок

от Атум

Установить (бесплатно)

Ставится из 1С-Битрикс Marketplace за пару минут — вкладка «Установка».

Скриншоты

Технические данные

Число установок:

100 - 499 раз

Дата обновления:

24.04.2025

Версия:

1.0.1

Адаптивность:

Нет

Поддержка композита:

Нет

Дата публикации:

15.05.2023

Совместимые редакции

Описание

Небольшой модуль, который автоматически компилирует файлы SCSS в файл CSS.

В настройке компонента предусмотрено:

Обработка несколько SCSS файлов;
Выбор несколько путей к импортируемым файлам;
Выбор через что подключать скомпилированный файл [ Нет |<link> | Asset::getInstance()->addCss() ];
Компиляция только если пользователь авторизован как администратор;
Проверка на изменения SCSS файлов;
Сжатие CSS файл после компиляции;
Генерация Source Map;
Включение автопрефиксер;
Выбор префиксoв.

Для компонента были использованный библиотеки:

После установки решения через Marketplece вызвать компонент.
В настройках компонента указать необходимые параметры.

Пример вызова компонента:

$APPLICATION->IncludeComponent(
   "atum:scss",
   "", 
   array(
      "AUTOPREFIXER_ENABLE" => "Y", //Включить автопрефиксер
      "AUTOPREFIXER_LIST" => array( //Список префиксoв
         0 => "IE",
         1 => "Webkit",
         2 => "Mozilla",
         3 => "Opera",
      ),
      "FILES_CSS" => SITE_TEMPLATE_PATH."/template_styles.css", //Путь к файлу CSS
      "FILES_IMPORT" => array(   //Список путей импорта:
         0 => SITE_TEMPLATE_PATH."/styles/", 
      ),
      "FILES_SCSS" => array(      //Список файлов SCSS для обработки
         0 => SITE_TEMPLATE_PATH."/scss/styles.scss", 
      ),
      "FILES_SET" => "0",       //Подключить CSS файл [0 - Нет|1 - Через элемент <li nk>|2 - Через метод Asset::getInstance()->addCss()]
      "SCSS_ACTIVE" => "Y",      //Включить компилятор
      "SCSS_ADMIN" => "Y",      //Выполнить компиляцию только если пользователь авторизован как администратор
      "SCSS_ERRORS" => "0",      //Вывод/Сохранить ошибку [0 - Нет|1 - log-файл|2 - Сообщение на экране]
      "SCSS_HASH" => "Y",         //Компилировать в файл CSS, только после изменение одного или нескольких файлов SCSS
      "SCSS_OUTPUT" => "Y",      //Сжимать CSS файл после компиляции
      "SCSS_SOURCEMAP" => "Y"      //Сгенерировать Source Map
   ),
   false,
   array(
      "HIDE_ICONS" => "Y"
   )
);

Внимание:
Параметр - "Компилировать только измененные файлы" не работает с импортированными файлами. Для этого предусмотрена кнопка "Сбросить хэш" в админ панели.

Также предусмотрено реализация Компилятора и Автопрефиксера через класс atumScss:

1. scssPhp

atumScss::scssPhp(
   string STYLE,
   bool COMPRESSED = true,
   array SOURCEMAP = array(),
   array IMPORTS = array()
);

2. PHPAutoprefixer

atumScss::PHPAutoprefixer(
   string STYLE,
   bool COMPRESSED = true,
   array VENDORS = array()
);

Пример:

$SCSS = atumScss::scssPhp(
   "test{test2{color: #373737;}}",   //Стили
   true,   //Сжимать стили
   array(   //Сгенерировать Source Map
      'sourceMapURL'      => '/style/style.css.map',       //Относительный или Полный URL-адрес файла .map
      'sourceMapFilename' => '/style/style.css',         //Относительный или Полный URL-адрес файла .css (Необязательный параметр)
      'sourceMapBasepath' => $_SERVER["DOCUMENT_ROOT"],    //Корневой путь для создания относительного URL
      'sourceRoot'      => '/'                      //Добавляется перед записями в поле "source" для перемещения исходных файлов (Необязательный параметр)
   ),
   array( //Список путей к импортируемым файлам
      '/test1/',
      '/test2/'
   )
);

$result = $SCSS['Style'];

$AUTOPREFIXER = atumScss::PHPAutoprefixer(
   $SCSS['Style'], //Стили
   true,   //Сжимать стили
   array(   //Список префиксов (По умолчанию: IE,Webkit,Mozilla)
      "IE",
      "Webkit",
      "Mozilla",
      "Opera"
   )
);

if(!empty($AUTOPREFIXER['Error'])){
   echo $AUTOPREFIXER['Error'];
}else{
   $result = $AUTOPREFIXER['Style'];
}

if(!empty($SCSS['Error'])){
   echo $SCSS['Error'];
}else{
   file_put_contents($_SERVER["DOCUMENT_ROOT"].'/style/style.css', $result);
   if($SCSS['SourceMap']){
      file_put_contents($_SERVER["DOCUMENT_ROOT"].'/style/style.css.map',$SCSS['SourceMap']);
   }
}

Техподдержка: teh@a-tum.ru
Отвечаем с ПН по ПТ с 9 до 18.
Просим в запросах на поддержку указывать адрес сайта и логин/пароль для программиста.