如何在Symfony 3中使用纯PHP编译SASS(scss) _SCSS

本文概述

1.安装scssphp
2.使用编译器

开发人员在Web应用程序上的工作方式每天都在变化, 如今, 许多应用程序都在动态集成JavaScript和CSS操作, 这意味着生产源代码是由某些PHP脚本自动创建的。 SASS是CSS的扩展, 它使你能够使用变量, 嵌套规则, 内联导入, 还有助于保持CSS的组织性, 并允许你更快地创建样式表, 这也是当今每个人都在使用的技术之一。如果你希望在自己的Symfony项目中集成SCSS编译器, 那么今天是你的幸运之日, 因为scssphp会为你完成此任务。
scssphp是用纯PHP编写的SCSS编译器库, 可以将scssphp包含在任何项目中。它包括一个命令行工具, 用于从终端/ shell或脚本中运行编译器。在本文中, 你将学习如何在Symfony 3项目中使用它。
1.安装scssphp安装库以在PHP中编译sass的首选方法是通过composer, 因此切换到项目的目录并使用以下命令进行安装：

composer require leafo/scssphp

安装后, 你将可以在控制器或symfony服务中使用软件包的Compiler类。有关此库的更多信息, 请在此处访问官方文档或Github上的官方存储库。
2.使用编译器如前所述, 该库非常易于使用, 并且文档很好。提供许多功能, 例如使用PHP声明变量(预设变量), 自定义导入路径等。我们将向你展示如何使用Symfony控制器中的编译器完成最典型的任务：
A.编译SCSS字符串并返回CSS响应
创建一个编译器实例, 并以SCSS字符串作为第一个参数运行compile方法。这将以字符串形式返回CSS结果, 你可以使用该字符串作为响应在控制器中发送：

< ?phpnamespace AppBundle\Controller; use Sensio\Bundle\FrameworkExtraBundle\Configuration\Route; use Symfony\Bundle\FrameworkBundle\Controller\Controller; use Symfony\Component\HttpFoundation\Request; use Symfony\Component\HttpFoundation\Response; use Symfony\Component\HttpKernel\Exception\HttpException; // Use the Sass compileruse Leafo\ScssPhp\Compiler; class DefaultController extends Controller{/*** @Route("/", name="homepage")*/public function indexAction(Request $request){// Create an instance of the Sass Compiler class$scss = new Compiler(); // Sass String$sassString = '$color: #abc; div { color: lighten($color, 20%); }'; // Compile the sass string and store the CSS result in another variable$css = $scss-> 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; }}

B.编译SCSS文件并写入CSS文件
编译器库不提供从文件写入另一个文件的方法, 因此你将必须获取编译器的输出并将其写入新文件。以下示例显示如何将all.scss文件编译为all.css文件：
注意如果你不喜欢使用普通的PHP方法读取和写入文件(file_put_contents和file_get_contents), 则可以改用Symfony的Filesystem包。

< ?phpnamespace AppBundle\Controller; use Sensio\Bundle\FrameworkExtraBundle\Configuration\Route; use Symfony\Bundle\FrameworkBundle\Controller\Controller; use Symfony\Component\HttpFoundation\Request; use Symfony\Component\HttpFoundation\Response; use Symfony\Component\HttpKernel\Exception\HttpException; // Use the Sass compileruse Leafo\ScssPhp\Compiler; class DefaultController extends Controller{/*** @Route("/", name="homepage")*/public function indexAction(Request $request){// Create an instance of the Sass Compiler class$scss = new Compiler(); // 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 filefile_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.scssfile_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方法使用其自定义格式化程序之一来更改输出的样式：

< ?phpnamespace AppBundle\Controller; use Sensio\Bundle\FrameworkExtraBundle\Configuration\Route; use Symfony\Bundle\FrameworkBundle\Controller\Controller; use Symfony\Component\HttpFoundation\Request; use Symfony\Component\HttpFoundation\Response; use Symfony\Component\HttpKernel\Exception\HttpException; // Use the Sass compileruse Leafo\ScssPhp\Compiler; class DefaultController extends Controller{/*** @Route("/", name="homepage")*/public function indexAction(Request $request){// Create an instance of the Sass Compiler class$scss = new Compiler(); // Add the expanded formatter to produce a readable format of CSS$scss-> 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 filefile_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.scssfile_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可能无效, 因此编译器将抛出一个异常, 你可以简单地捕获它：

< ?phpnamespace AppBundle\Controller; use Sensio\Bundle\FrameworkExtraBundle\Configuration\Route; use Symfony\Bundle\FrameworkBundle\Controller\Controller; use Symfony\Component\HttpFoundation\Request; use Symfony\Component\HttpFoundation\Response; use Symfony\Component\HttpKernel\Exception\HttpException; // Use the Sass compileruse Leafo\ScssPhp\Compiler; class DefaultController extends Controller{/*** @Route("/", name="homepage")*/public function indexAction(Request $request){try{// Create an instance of the Sass Compiler class$scss = new Compiler(); // Sass String$sassString = 'div { color: lighten($color, 20%); }'; // Compile the sass string and store the CSS result in another variable$css = $scss-> 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编译器错误：未定义的变量$ color：行：1
【如何在Symfony 3中使用纯PHP编译SASS(scss)】编码愉快！