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
LESS looks awesome!
Thanks for linking that project.
Automatic compilation
Why not compile the script depending on original file changes?
Can't find ext.less.components.LessCompilationBehavior on bitbucket?
Which commit is 0.9.0?
@schmunk
LessCompilationBehavior was removed a while ago, in the latest version you just add 'less' to your components to be preloaded if you want to use eager loading (which was previously done by the behavior).
Thanks, very useful plugin
Could you separate the parser from your extension (put it in vendors/, just require it) and support for a "from" and a "to" path to be given, so that every less file inside the "from" path gets compiled to the corresponding "to" path?
<from>/aa.less ==> <to>/aa.css <from>/bb.less ==> <to>/bb.css <from>/ii/cc.less ==> <to>/ii/cc.css <from>/ii/jj/dd.less ==> <to>/ii/jj/dd.css
can't load for me
Can't load ext form me. Whats wrong?
'preload'=>array ( 'less', 'log', 'bootstrap', ), 'components'=>array ( 'lessComplier'=>array( 'autoCompile'=>true, 'class'=>'ext.less.components.LessCompiler', 'paths'=>array( '/less/styles.less'=>'/css/style.css', ) ), [....]
16:15:21.978339 trace system.CModule
Loading "log" application component
in C:\Users\User\www\z3usproject\index.php (13)
16:15:21.983776 trace system.CModule
Loading "bootstrap" application component
in C:\Users\User\www\z3usproject\index.php (13)
@Stageline
The
setup
is a bit misleading:'preload'=>array ( 'less', 'log', 'bootstrap', ), 'components'=>array ( 'less'=>array( //the same as in preload 'autoCompile'=>true, 'class'=>'ext.less.components.LessCompiler', 'paths'=>array( '/less/styles.less'=>'/css/style.css', ) ),
Could not compile latest bootstrap.less file
"Less\Exception\CompilerException:#grid > .core is undefined "
Note that the file compiles fine with Winless.
less compiler for bootstrap
try this less compiler for bootstrap
Could not compile latest bootstrap.less file "Less\Exception\CompilerException:#grid > .core is undefined " Note that the file compiles fine with Winless.
import
and doesn't seem to work with import statements
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
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!
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.
lessphp 0.3.8 update?
are you planning to update this extension to use the latest version of leafo's lessphp?
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.
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
@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
toconfig/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.
@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?
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.
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?
@sandro1111
Which errors do you get? The way you described works fine for me.
@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?
Does the less compiler gets invoked?
Do you still register the compiler in the layout?
Just a shot in the dark...
@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.
Trace down the command which is executed
Hmm, use
echo
s or Yii::log() to see in detail what happens and which command gets executed. Sorry, I got no more ideas ...?!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.
Just fork it ;)
https://github.com/Crisu83/yii-less/edit/master/README.md
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'); }
Thanks
Very nice ext. It's just what I've been looking for. Thanks, man!:)
?
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!
If you have any questions, please ask in the forum instead.
Signup or Login in order to comment.