Как скомпилировать SASS (scss) с использованием простого PHP в Symfony 3

Содержание

1 1. Установите scssphp
2 2. Использование компилятора

То, как разработчики работают над веб-приложениями, каждый день меняется, многие приложения в настоящее время интегрируют манипуляции с JavaScript и CSS на лету, что означает, что производственный исходный код создается автоматически некоторыми PHP-скриптами. SASS, расширение CSS, которое позволяет вам использовать переменные, вложенные правила, встроенный импорт, а также помогает упорядочить CSS-элементы и позволяет быстрее создавать таблицы стилей, является одной из тех технологий, которые сегодня используют все. Если вы хотите интегрировать компилятор SCSS в свой проект Symfony, сегодня ваш удачный день, так как scssphp сделает это за вас.

scssphp — это библиотека компилятора для SCSS, написанная на чистом PHP, scssphp готова для включения в любой проект. Он включает в себя инструмент командной строки для запуска компилятора из терминала / оболочки или скрипта. В этой статье вы узнаете, как использовать его в своем проекте Symfony 3.

1. Установите scssphp

Предпочтительный способ установки библиотеки для компиляции sass в PHP — через composer, поэтому переключитесь в каталог вашего проекта и установите его с помощью следующей команды:

composer require leafo/scssphp

После установки вы сможете использовать класс Compiler пакета в ваших контроллерах или службах Symfony. Для получения дополнительной информации об этой библиотеке, пожалуйста, посетите официальную документацию или же официальный репозиторий на Github здесь.

2. Использование компилятора

Как уже упоминалось, библиотека довольно проста в использовании и довольно хорошо документирована. Предлагает множество функций, таких как объявление переменных с помощью PHP (предустановленные переменные), настройка путей импорта и т. Д. Мы покажем вам, как выполнять наиболее типичные задачи с помощью компилятора в контроллерах Symfony:

A. Компиляция строки SCSS и возврат ответа CSS

Создайте экземпляр компилятора и запустите метод компиляции со строкой SCSS в качестве первого аргумента. Это вернет результат CSS в виде строки, которую вы можете использовать для отправки в качестве ответа в контроллере:

compile($sassString);
// Return a response of CSS Type
$response = new Response();
$response->setContent($css);
$response->setStatusCode(Response::HTTP_OK);
$response->headers->set('Content-Type', 'text/css');
return $response;
}
}

Б. Компиляция файла SCSS и запись в файл CSS

Библиотека компилятора не предлагает способ записи из файла в другой, поэтому вам придется получить выходные данные компилятора и записать его в новый файл. В следующем примере показано, как скомпилировать all.scss подать в all.css файл:

Заметка

Если вы не любите использовать простые методы PHP для чтения и записи файлов (file_put_contents а также file_get_contents), вы можете использовать вместо пакет файловой системы Symfony.

get('kernel')->getRootDir() . '/../web/assets/sass/';
// Path to the folder of css files
$cssFilesPath = $this->get('kernel')->getRootDir() . '/../web/assets/css/';
// Write output css file
file_put_contents(
$cssFilesPath. "all.css",
// Set the content of all.css the output of the
// sass compiler from the file all.scss
$scss->compile(
// Read content of all.scss
file_get_contents(
$sassFilesPath. "all.scss"
)
)
);
return new Response("Sass File Succesfully compiled");
}
}

C. Изменение формата вывода CSS

Компилятор по умолчанию использует форматер вложенных выходных данных, который выводит CSS следующего типа:

.navigation ul {
line-height: 20px;
color: blue; }
.navigation ul a {
color: red; }
.footer .copyright {
color: silver; }

В некоторых случаях вам могут потребоваться читаемые версии кода или даже минимизированные версии. Компилятор позволяет вам изменить стиль вывода, используя один из его пользовательских форматеров, используя setFormatter метод:

setFormatter(new \Leafo\ScssPhp\Formatter\Expanded());
// Other possible formatters:
//Leafo\ScssPhp\Formatter\Expanded
//Leafo\ScssPhp\Formatter\Nested (default)
//Leafo\ScssPhp\Formatter\Compressed
//Leafo\ScssPhp\Formatter\Compact
//Leafo\ScssPhp\Formatter\Crunched
// Path to the folder of the sass files
$sassFilesPath = $this->get('kernel')->getRootDir() . '/../web/assets/sass/';
// Path to the folder of css files
$cssFilesPath = $this->get('kernel')->getRootDir() . '/../web/assets/css/';
// Write output css file
file_put_contents(
$cssFilesPath. "all.css",
// Set the content of all.css the output of the
// sass compiler from the file all.scss
$scss->compile(
// Read content of all.scss
file_get_contents(
$sassFilesPath. "all.scss"
)
)
);
return new Response("Sass File Succesfully compiled");
}
}

Который должен вместо этого создать следующий CSS:

.navigation ul {
line-height: 20px;
color: blue;
}
.navigation ul a {
color: red;
}
.footer .copyright {
color: silver;
}

D. Ловля исключений компилятора

В некоторых случаях возможно, что ваш CSS неверен, поэтому компилятор выдаст исключение, которое вы можете просто перехватить:

compile($sassString);
// Return a response of CSS Type
$response = new Response();
$response->setContent($css);
$response->setStatusCode(Response::HTTP_OK);
$response->headers->set('Content-Type', 'text/css');
return $response;
}catch(\Exception $e){
return new Response("SCSS Compiler Error: " . $e->getMessage());
}
}
}

Например, предыдущий код выдаст исключение: SCSS Compiler Error: Undefined variable $color: line: 1