如何在Symfony 3中使用纯PHP编译LESS

本文概述

• 1.安装lessphp
• 2.使用编译器

CSS创造了一个更好的在线世界, 但是当你处理大型项目时, 它的语法很容易变得很冗长, 而这些项目不是你自己修改的。解决此问题的一种可行方法是使用CSS预处理程序(如LESS)。与CSS相比, 更少的代码简单且井井有条, CSS的这种预处理器扩展了CSS的特性和功能, 例如变量, 函数, mixin, 嵌套规则, 操作, 导入其他较少文件的用法以及许多其他功能, 生成CSS。

在本文中, 你将学习如何在Symfony 3项目中将LESS字符串或文件编译为CSS。

1.安装lessphp

为了仅使用php将LESS转换为CSS, 你将需要使用lessphp库。整个编译器都包含在一个单独的类中, 但是还包括一个附加的编译器命令行界面。它非常易于使用, 并且可以使用以下命令在你的Symfony项目中轻松地与composer一起安装：

composer require leafo/lessphp

安装该库之后, 你将可以在代码中使用lessc命名空间, 并且可以在代码中创建编译器的实例, 例如：

// Import less compiler
use lessc;

// Instantiate compiler
$less = new lessc();

// Use the compiler here ...

有关此库的更多信息, 请访问Github上的官方存储库。

2.使用编译器

编译器非常简单, 可以为你完成所有工作, 但是你需要指出应该做什么以及如何进行。基本上, 你所需要做的就是创建一个编译器实例并执行一些提供的方法以根据需要进行编译：

A.编译较少的字符串并以CSS返回响应

下面的示例演示如何将简单的LESS字符串转换为CSS字符串, 并以CSS文件的内容类型作为响应返回(理论上将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 Less compiler
use lessc;

class DefaultController extends Controller
{
    /**
     * @Route("/", name="homepage")
     */
    public function indexAction(Request $request)
    {
        // Create an instance of the Less Compiler class
        $less = new lessc;

        // Your Less code
        $lessString = ".block { padding: 3 + 4px }";
        
        // Use the compile method to convert less to css
        $css = $less->compile($lessString);

        // 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.编译较少的文件并写入CSS文件

以下示例使用compileFile方法将一个较少的文件编译为一个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 Less compiler
use lessc;

class DefaultController extends Controller
{
    /**
     * @Route("/", name="homepage")
     */
    public function indexAction(Request $request)
    {
        // Create an instance of the Less Compiler class
        $less = new lessc;

        // Path to the folder of the less files
        $lessFilesPath = $this->get('kernel')->getRootDir() . '/../web/assets/less/';

        // Path to the folder of css files
        $cssFilesPath = $this->get('kernel')->getRootDir() . '/../web/assets/css/';

        // Compile the all.less file to compiled.css
        $less->compileFile($lessFilesPath. "all.less", $cssFilesPath. "compiled.css");
        
        return new Response("Less File succesfully compiled");
    }
}

编码愉快！