using Less css preprocessor with Diem

7 views
Skip to first unread message

djacquel

unread,
Dec 18, 2010, 11:10:19 AM12/18/10
to diem-users
Diem rock's, and thanks to our new leads, Diem will still help us get
the job done.

I've just integrated sfLESSPlugin to Diem and it works. It really cuts
css dev time.
I really think that it's a must have for the next Diem version.
For the moment that's how I get him working.

1 - Install sfLESSPlugin (http://www.symfony-project.org/plugins/
sfLESSPlugin)
$ symfony plugin:install sfLESSPlugin
it can by done through git

2 - Download php less parser (http://leafo.net/lessphp/)
Less can parse your less files client or server side, but for
performance, its better to parse server side.
As sfLESSPlugin use node.js to parse server side, I decided to use
lessphp parser instead, the allows me to install it on any server I
what without managing a node.js install that is not always easy.
The file
- lessc.inc.php
must be renamed to
- lessc.class.php (to use autoloading) and stored in /plugins/
sfLESSPlugin/lib/lessc.class.php

3 - Modify sfLESSPlugin class
Modify plugins/sfLESSPlugin/lib/sfLESS.class.php
This will allow this class to find out less and css in Diem hierachy
and to use lessc.php to process our less files server side.
Replace following methods in sfLESS.class.php

static public function getCssPaths()
{
return self::getSepFixedPath(sfConfig::get('sf_web_dir')) . '/
theme/css/';
}
static public function getLessPaths()
{
return self::getSepFixedPath(sfConfig::get('sf_web_dir')) . '/
theme/less/';
}
public function callLesscCompiler($lessFile, $cssFile)
{
try
{
$less = new lessc( $lessFile );
$css = $less->parse();
file_put_contents( $cssFile, $css );
return $css;
}
catch (exception $e)
{
return false;
}

}

4 - Add configuration to apps/front/config/app.yml
Add
all:
sf_less_plugin:
compile: true
use_js: false

5 - Run a sudo php symfony dm:setup
And you can use less preprocessor !
It really cuts development time, as they say, "Less.js Will Obsolete
CSS"

Useful URLs :
- LESS css doc : http://leafo.net/lessphp/docs/
- LESS php parser : http://leafo.net/lessphp/
- sfLESSPlugin : http://www.symfony-project.org/plugins/sfLESSPlugin

I put that here because my blog is still not ready and I want to make
to help Diem get more power.
And I'm ok, it's quick and dirty but I really don't have time (and
knowledge) to wrap it up to a plugin for now.
But I'm ok if some folks wants to join me to do the job.

Thank again to the Diem team for their job.

David

Stéphane

unread,
Dec 18, 2010, 12:05:40 PM12/18/10
to diem-...@googlegroups.com
Well, thank you for taking the time for testing integrating LESS with Diem !

I think we will integrate it to Diem.
In fact we have already talked about this in the forum, but we wanted to close issues first before anything else (and yes I broke this as I merged 5.1-nestedset branch today... before having any issue closed, but I told I'll do it any time soon).

So I think we will integrate it soon :)

Regards,


Before Printing, Think about Your Environmental Responsibility!
Avant d'Imprimer, Pensez à Votre Responsabilitée Environnementale!

Thomas Ohms

unread,
Dec 24, 2010, 3:51:37 AM12/24/10
to diem-...@googlegroups.com
So next version will be a 5.4 :)

2010/12/18 Stéphane <stephan...@gmail.com>
Reply all
Reply to author
Forward
0 new messages