Yii 1.1: less

less - Compile your LESS both client and server-side
58 followers

Less is an extension that allows developers to compile LESS files using the native JavaScript compiler. LESS can be compiled both client-side using less.js and server-side using lessc, the extension supports both compilers.

Requirements

Credits

Thanks to my friend Sam Stenvall (negge) for providing me with his version of the server-side compiler.

Links

Usage

You can read about how to setup and use the extension from its README on GitHub.

Changes

v1.0.0 (Jan 17, 2013)

  • Initial release

Total 20 comments

#16860 report it
sl1p at 2014/04/04 01:38pm
?

But I think you should add some feature like "file sets", because it's not very nice to duplicate compiler options for each compoment instance "filesArea1, filesArea2, etc."

E.g.

/**
* Registered LESS files.
* @param string|array $files if array then it will be used as files array, if string then as fileSet
*/
Less::register($files = null);
 
if($files === null)
{
    $files = $this->files;
}
elseif(!is_array($files))
{
    if(!isset($this->fileSets[$files]))
    {
        throw new CException('File set "'.$files.'" not set');
    }
    $files = $this->fileSets[$files];
}
 
...
 
$config['files'] = $files;
$compiler = Yii::createComponent($config);

So i'm setting up my config as follows:

'less'=>array(
    'class'=>'ext.less.components.Less',
    'mode'=>IS_DEV? 'client' : 'server',
    'fileSets'=>array(
        'app'=>array(
            'themes/app/default/less/app.less'=>'css/app-{hash}.css'
        ),
        'landing'=>array(
            'themes/app/default/less/landing.less'=>'css/landing-{hash}.css'
        )
    ),
    'options'=>IS_DEV?
        array(
            'env' => 'development',
            'relativeUrls' => true
        )
        :
        array(
            'nodePath'=>'/my/path/to.js',
            'compilerPath'=>'/my/path/to/lessc',
            'strictImports'=>true,
            'forceCompile'=>false,
        ),
),

And in layout I'm just using:

<?php Yii::app()->less->register('app'); ?>

If you have better idea how to realise it, please let me know. Thanks!

#16848 report it
sl1p at 2014/04/03 02:00pm
Thanks

Very nice ext. It's just what I've been looking for. Thanks, man!:)

#12480 report it
schmunk at 2013/03/22 12:13pm
Usage tip

Enable auto-compiling if you've enabled the component.

// CSS files
if (Yii::app()->hasComponent('less')) {
    Yii::app()->less->files = array('themes/frontend/less/p3.less' => 'themes/frontend/css/p3.css');
    Yii::app()->less->register();
}
else {
    // fallback
    $cs->registerCssFile(Yii::app()->theme->baseUrl . '/css/p3.css');
}
#12298 report it
sandro1111 at 2013/03/12 03:47am
Found solution

Finally I found the solution... The problem was the command executing the compiler. It seems to have some wrong syntax the the less version I have installed. I changed the command and now it works like a charm.

$command = 'lessc ' . implode(' ', $options) . ' "' . $lessPath . '" > "' . $cssPath . '"';

I also found out that the compiled files need to have the file extension ".css" because ".less" is not interpreted as css in the html header. So may be you could change this in your README.

Thanks for your help.

#12290 report it
schmunk at 2013/03/11 02:42pm
Trace down the command which is executed

Hmm, use echos or Yii::log() to see in detail what happens and which command gets executed. Sorry, I got no more ideas ...?!

#12278 report it
sandro1111 at 2013/03/11 05:11am
@schmunk

Yes I am still registering in the layouts html header. Should I try to register it in the init() function or where would you do it?

I've created a post in the forum. May be we could discuss my problem in this thread.

#12276 report it
schmunk at 2013/03/11 03:53am
Does the less compiler gets invoked?

Do you still register the compiler in the layout?

Yii::app()->lessArea1->register();

Just a shot in the dark...

#12274 report it
sandro1111 at 2013/03/11 01:47am
@schmunk

I do not get any errors... The less files are just not compiled. When I compile the files manually everything works fine but when I run the application the less files are not generated and I get the standard layout (without less generated css). Are there some possible problems you could imagine?

#12268 report it
schmunk at 2013/03/10 03:41pm
@sandro1111

Which errors do you get? The way you described works fine for me.

#12214 report it
sandro1111 at 2013/03/07 03:46am
Multi area layout

I've got some problems with using different less files for showing different styles in different areas of one application. With client side mode I used this code in the header of protected/views/layouts/main.php:

Yii::app()->less->files = array('less/instance.less'=>'css/instance.less');
Yii::app()->less->register();

Now I changed to server side mode and can't get it to work. With the code from client side mode it didn't work so I changed to only register less in the layouts/main.php's header. I also tried to use multiple instances of the compiler but this seems not to work too. The code therefore looked like that:

'lessArea1'=>array(
    'class'=>'ext.less.components.Less',
    'mode'=>'server',
    'files'=>array(
        'less/area1.less'=>'css/area1.less',
        'less/styles.less'=>'css/styles.less',
    ),
    'options'=>array(
        'nodePath'=>'/my/path/to.js',
        'compilerPath'=>'/my/path/to/lessc',
        'strictImports'=>true,
        'forceCompile'=>true,
    ),
),
'lessArea2'=>array(
    'class'=>'ext.less.components.Less',
    'mode'=>'server',
    'files'=>array(
        'less/area2.less'=>'css/area2.less',
        'less/styles.less'=>'css/styles.less',
    ),
    'options'=>array(
        'nodePath'=>'/my/path/to.js',
        'compilerPath'=>'/my/path/to/lessc',
        'strictImports'=>true,
        'forceCompile'=>true,
    ),
),

And of course I changed the register code to register lessArea1 and lessArea2. But it was always the same, I had always the same style in both areas.

Does anyone have an idea what I'm doing wrong or an hint how I could do this better?

#12056 report it
schmunk at 2013/02/25 06:35am
Directory permissions?

If it does not work from your webserver, but on the Terminal with your user, I would have guessed directory permissions. But if they are adjusted ... ?!

May you can try to execute the command as webserver, like:

sudo -u www "/less/command ... goes here"

and see if you find some errors there.

#12048 report it
gb5256 at 2013/02/23 05:34pm
@schmunk

Hello Schmunk, thanks for your help so far. I still receive a "Failed to compile file" error. After this error message, the commands are displayed. I copy these into the terminal, and it works perfect. But not from within yii (or lets say not by the apache). The Css folder and also the styes.css are writeable.

Any ideas?

#12016 report it
schmunk at 2013/02/20 02:51pm
@gb5256

Here's my less compiler setup for OSX.

Find your node :)

$ which node
/opt/local/bin/node

You can try the setup in Phundament, download install, copy config/local-dist.php to config/local.php, give write permission to the css folder, don't forget to register the less compiler in your main layout.

If you get an error, paste the command into Terminal to receive the full error output.

#12015 report it
gb5256 at 2013/02/20 02:42pm
less & NPM on OSX?

Does anybody have experience with this Less extension on OSX? I have installed node.js and Less (global). I can run a less command from the Terminal and create a CSSfile from a LESSfile. So it should work. I manage it to compile client side (this has nothing to do with npg, I know. But it means that I have installed the extension in Yii correctly). But I do not get it to work server side from within this extension. I think it is a problem with the path settings. What paths do you guys (on OSX) have there in the less config of yii?

Thanks for any hints, gb5256

#11494 report it
Chris83 at 2013/01/16 05:49pm
Completely rewritten

I completely rewrote the extension to use the native JavaScript compiler. It now also supports both client and server-side compilation. Client-side compilation is great during development.

#10679 report it
dimvic at 2012/11/14 12:29pm
lessphp 0.3.8 update?

are you planning to update this extension to use the latest version of leafo's lessphp?

#9817 report it
este at 2012/09/12 10:35pm
cpu consuming

great extension. unfortunately it is very cpu consuming. someone asked why not compile less files only when original files are changed.. that would make an even greater extension for Yii. thanks for your work.

#9048 report it
fleuryc at 2012/07/16 10:44am
Publish the CSS as an asset

Hi!

Great work (again)!

Just a question : would'nt it be great if we did'nt have to create those CSS files and if they were just created and published automatically as assets, using the great Yii assets functionnality?

Cheers!

#8507 report it
gb5256 at 2012/06/08 05:57am
Do I miss something in the installation procedure?

Hello,

First of all: you bootstrap is fantastic. While digging deeper into that one, LESS is next.

I did everything shown above to setup LESS, but I still do not know what to do now ... or lets say: next. Do I have to create the file css/styles.css? Where do I need to create that (inside the css folder, inside the less folder).

To point at the official documentation of LESS is not so useful, as I do not know what your extension exactly does and how it incoporates the official LESS within Yii.

Or are there too many trees in front of my eyes so that I do not see the forrest?

gb5256

Leave a comment

Please to leave your comment.

Create extension