How to compile LESS using plain PHP in Symfony 3

CSS created a better online world, however its syntax can easily become very verbose when working on huge projects that aren't modified only by yourself. A posible solution to this problem, is the usage of CSS preprocessors like LESS. Less codes are simple and well organized as compared to CSS, this pre-processor of CSS extends features and capabilities of CSS, like the usage of variables, functions, mixins, Nested Rules, Operations, Importing other less files, and many more features that generates CSS.

In this article you will learn how to compile a LESS string or files into css in your Symfony 3 project.

1. Install lessphp

In order to transpile LESS into CSS using only php, you will need to use the lessphp library. The entire compiler comes in a single includable class, but an additional command line interface to the compiler is included. It's pretty easy to use and can be easily installed with composer in your Symfony project using the following command:

composer require leafo/lessphp

After the installation of this library, you will be able to use the lessc namespace in your code and you will be able to create an instance of the compiler in your code like:

// Import less compiler
use lessc;

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

// Use the compiler here ...

For more information about this library, please visit the official repository at Github here.

2. Using the compiler

The compiler is very straightforward and does all the job for you, but you need to indicate what and how it should proceed. Basically, all that you need to do is to create an instance of the compiler and execute some of the offered methods to compile according to your needs:

A. Compiling a less string and returning response as CSS

The following example shows how to convert a simple LESS string into a CSS string and return it as response with the content-type of a CSS file (theoretically a CSS file is returned as response):

<?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. Compiling a less file and writing into a css file

The following example compiles a less file into a css file using the compileFile method:

<?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");
    }
}

Happy coding !