srcmini本文概述
开发人员在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结果, 你可以使用该字符串作为响应在控制器中发送：
<?php
namespace 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 compiler
use 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包。
<?php
namespace 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 compiler
use 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 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方法使用其自定义格式化程序之一来更改输出的样式：
<?php
namespace 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 compiler
use 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 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可能无效, 因此编译器将抛出一个异常, 你可以简单地捕获它：
<?php
namespace 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 compiler
use 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
编码愉快！
评论前必须登录！
注册