For all of you that don’t know what Less CSS is, check this first, but I will try to summarize it in a phrase:

It is a way of writing cleaner CSS code using variables and mixins but with the need of being compiled to an actual CSS file.

Lets see an example of .less file:

@corporate-red: #c00;

a {
  color: @corporate-red;
}

... (1000 lines of code later) ...

blockquote em {
  color: @corporate-red;
}

After compiling it would become:

a {
color: #cc0000;
}

... (1000 lines of code later) ...

blockquote em {
  color: #cc0000;
}

With the advantage that, if we change the value of @corporate-red to #900 we can re-compile and go on, changing only one value.

Ok, ¿how we do benefit of this wonder in symfony?

There are multiple plugins and libraries for symfony but I’m a idle for some things. My quick & dirty solution is not the best because I must update all libs manually, but it was only an experiment that someone less idle than me can use to develop a great updateable symfony plugin.

I used:

• LessPHP
• LessJS
• Less effort

First I got the lessphp’s lessc class file (lessc.inc.php) and renamed it to lessc.class.php and moved it into my sf project’s lib directory.

Later I supposed that I could have my .less and my .css files in the same folder and use .less files in development environment and compiled .css files in production so I’ve created a task to recompile manually all .less files in my /css folder.

// lib/task/compileLessTask.class.php

class compileLessTask extends sfBaseTask
{
  protected function configure()
  {
    $this->namespace = "less";
    $this->name = "compile";
    $this->briefDescription = "Compile all .less files into .css files";
  }

  protected function execute($arguments = array(), $options = array())
  {
    $dir = sfConfig::get('sf_web_dir')."/css";

    // Exclude all *.inc.less from compile
    $lessfiles = sfFinder::type('file')
      ->not_name('*.inc.less')->name('*.less')
      ->in($dir);

    $compiler = new lessc();
    $compiler->importDir = $dir."/includes/";

    foreach($lessfiles as $lessfile)
    {
      echo "Compiling ".basename($lessfile).PHP_EOL;
      try
      {
        file_put_contents(dirname($lessfile)."/".basename($lessfile, '.less').".css", $compiler->parse(file_get_contents($lessfile)));
      }
      catch (Exception $e)
      {
        echo "Less fatal error: ".$e->getMessage().PHP_EOL;
      }
    }
  }
}

So I can run $ php symfony less:compile in my terminal after a development session.

And finally, we must load different stylesheets if we are in dev environment than in other cases, so I created a LessHelper.php file in my apps/myapp/lib/helper directory:

function use_less_stylesheet($css, $position = '', $options = array())
{
  if ("dev" == sfConfig::get('sf_environment'))
  {
    use_javascript('less-1.0.35.min.js', 'last');
    use_stylesheet(basename($css, '.css').".less", $position, array_merge($options, array('rel' => 'stylesheet/less')));
  }
  else
  {
    use_stylesheet(basename($css, '.less').".css", $position, $options);
  }
}

As you can see I’ve added the LessJS file to my /js folder and loaded the in dev environment.

The problem here is that I cannot get this working through the app-level view.yml file so I’ve done it through a helper taking advantage of the fact that the configuration of assets in view.yml is deprecated in favor of use_javascript and use_stylesheet helpers.

Suppose you’ve done all of this and I forgot nothing, and suppose you have a layout.less file in /css folder and lessjs in /js folder. You would have something like this:

/apps/myapp/lib/helper/LessHelper.php
/apps/myapp/templates/layout.php
/lib/lessc.class.php
/lib/task/compileLessTask.class.php
/web/css/layout.less
/web/js/less-1.0.35.min.js

And in your layout.php you’ve added:

<?php
use_helper('Less');
use_less_stylesheet('layout');
?>

Then if you access your production environment, symfony will add the following line to your document’s head section:

<link rel="stylesheet" type="text/css" media="screen" href="/css/layout.css">

And if you access your dev environment:

...
<link rel="stylesheet/less" type="text/css" media="screen" href="/css/layout.less">
...
<script type="text/javascript" src="/js/less-1.0.35.min.js"></script>

And the JS will generate just after its inclusion:

<style type="text/css" media="screen" id="less:css-layout">
/* THE COMPILED CODE */
</style>

In dev mode code is always compiled. In production you will get your styles if you previously compiled the css with the task we created. Why don’t automatically compile the CSS? Well, it would add complexity and I don’t want it. I’m idle, but I’m not so lazy as to not run the task to update .css files before uploading changes to my version control system.

That’s all! Comments are appreciated.