Integrating LESS with Zend Framework the easy way

This thought occurred 2 years ago with the tags bootstrap, Code, css, Howtos, less, lessphp & zend_framework.

LESS is a framework which extends CSS to make it more dynamic, and allow for nested rules, variables, and other time-saving operations. I won't bother explaining it here, since the website does a great job of it. Since the default toolkit is Javascript, and does all the hard work in the browser after downloading the files, there are some alternatives which run server side, lessphp a PHP tool kit I will be using in this post.

Now, to make the style sheet compilation as efficient as possible, we want do not want it to be running in a production environment on every page request. The best solution is to compile the CSS during development, commit it to the repository, so when it's loaded into production it is ready to go and can be served as a raw file. But we need to also watch out for the need to run a script manually before we commit any changes - this step is easy to forget and if the change has important CSS changes, it can be frustrating to debug.

So, our challenge is to find a way to automatically compile our LESS into CSS during development so it can be a static file in production.

Since I use Zend Framework, this will focus around that specifically, but it can be applied to any PHP project. I am also going to assume you have lessphp downloaded and working. Also note, you need to use some form of environmental variable to identify when the project is in development and when it is in production. ZF uses the APPLICATION_ENV constant.

Step One:

Decide where your style sheet is going to live. I have all of mine within ./public/less, with all my un-compiled LESS files called something.less, and my final compiled CSS will be called ./public/less/style.css. This is what I link to in my layout.phtml:

<link rel="stylesheet" href="<?php echo $this->baseUrl("less/style.css"); ?>">

Step Two:

In order to update the ./public/less/style.css file before the browser requests it on page load, we need our application to do the compiling. In Zend Framework, this is a simple matter of adding an init function into our Bootstrap class:

./application/bootstrap.php
 
class Bootstrap extends Zend_Application_Bootstrap_Bootstrap
{
    /**
     * The Application Bootstrap will automatically run each 
     *  class prefixed with '_init' within the Bootstrap.
     * Something unique like '_initCss' will ensure it 
     *  doesn't conflict with the defaults.
     */
    protected function _initCss()
    {
        /**
         * If in production, the CSS should already be compiled
         *  so we don't want to waste our processing time.
         */
        if (APPLICATION_ENV == "production") {
             return;
        }
 
        /**
         * Include the LessPHP library from where we saved it.
         */
        require_once APPLICATION_PATH."/../library/lessphp/lessc.inc.php";
 
        /**
         * Identify the source LESS stylesheet, and the 
         *  destination CSS stylesheet.
         */
        $sLess = APPLICATION_PATH."/../public/less/style.less";
        $sCss  = APPLICATION_PATH."/../public/less/style.css";
 
        /**
         * Compile the source LESS through lessc() and save
         *  the output CSS into the destination.
         */
        $oLessc = new lessc($sLess);
        file_put_contents($sCss, $oLessc->parse());
    }
}

Step Three:

There is no Step Three :)

All you need to do now is make changes to your LESS stylesheets and then run your application in development mode. This will compile the LESS into CSS, and this final product can be saved and used in production. This method still requires an action after editing the LESS, but you should be checking your changes work in development before rolling them out anyway, so it should be an invisible and automatic process.

I hope this tutorial will prove useful if you are working with LESS in PHP.

This website was built by , is powered by the goodness that is PHP and Laravel 4, and is licensed under CC BY-SA 3.0.