LessCss port to php, and now also to Codeigniter

[eluser]Unknown[/eluser]
The original LessCss for ruby: http://lesscss.org/

The port to php called LessPhp : http://leafo.net/lessphp/docs/

And now, the Codeigniter library wrapper for LessPhp (alpha):

(download the attached zip file)

EDIT: I accidentally put the documentation from the non-CI version in the topic ($less = new LessCss(); ). I updated it. Now it is the CI version ($this->lesscss->... ).


Usage

Code:

//figure out the paths to our folders relative to codeigniter index.php

//where test.less is
$relativePath_less = 'someSubfolder/css/less';      

//where you want to put the converted test.css file
$relativePath_css = 'someSubfolder/css';    

//where Less.php is
$relativePath_lessphp = "someSubfolder/css/LessCss/LessCss.php";


//load the LessCss library:
$this->load->library('LessCss/lesscss');
        

//tell it where the folders are:
$this->lesscss->init($relativePath_less,$relativePath_css);

//OR set them in the codeigniter main config file:
$config['less_css_dir_dot_less'] = "css";
$config['less_css_dir_dot_css']    = "css/less";

//if no errors, then the output of this code should be 'test.css':
echo $this->lesscss->compile('test.less');
  
//output:
test.css

//so typical usage is:
<link type="text/css" href="css/<?php echo $this->lesscss->compile('myStyle.less'); ?>" rel="stylesheet">

//this will output:
<link type="text/css" href="css/myStyle.css" rel="stylesheet">

//in the background, $this->lesscss->compile() has:
    //checked if 'myStyle.less' needs to be compiled,
    //and compiled it if necesary, so 'myStyle.css' is always up to date

[eluser]WanWizard[/eluser]
Why not make it CI standard, and convert it into a library, so you can do

Code:

$this->load->library('lesscss');
$this->lesscss->init();

[eluser]Unknown[/eluser]
@WanWizard

That's how it acually works. I put the documentation from the non-CI version by accident.

Updated it now.

[eluser]wascko[/eluser]
nice one, thanx!
I just started using .less and loving it !
still trying to find a way to do something like:

Code:

background-image: url(@site_url'my_images/back.jpg');

[eluser]Shaun Andrews[/eluser]
This is interesting. I use lesscss everyday, and it's become a valuable tool. Does this check the less file on each page load for changes? What about cacheing?

[eluser]wascko[/eluser]
@shaun
as far as i understand this only builds the css file if the .less file is newer than the latest generated css-file.
Someone told me to be carefull about the caching of the css file though.
You could ad a variable to the css path to be sure the css is not cached.
I am using:

Code:

<link type="text/css" href="<?=site_url()?>css/<?php echo $this->lesscss->compile('style.less');?>?<?$cssinfo = get_file_info(site_url('css/style.css'));echo $cssinfo["date"];?>" rel="stylesheet" />

not sure if this is a good way to use it, but it works for me.

[eluser]Gregory Bolkenstijn[/eluser]
@georgeh

I'm getting this:

#header {
background: @navy;
font-style: italic;
height: 43px;
line-height: 43px;

a {
text-decoration: none;
i {
color: @blue;
}
}
}

Compiles to:

#header a i { color:#007dc4; }
#header a { text-decoration:none; }
#header {
background:#33566a;
font-style:italic;
height:43px;
line-height:43px;
}

It's is the wrong order. Am I doing something wrong or what's happening?

[eluser]darrentaytay[/eluser]
Doesn't seem to be anything wrong with that Gregory?

[eluser]Gregory Bolkenstijn[/eluser]
It's in the wrong order. The order is very important in CSS.

#header a i { color:#007dc4; }
#header a { text-decoration:none; }
#header {
background:#33566a;
font-style:italic;
height:43px;
line-height:43px;
}

should be:

#header {
background:#33566a;
font-style:italic;
height:43px;
line-height:43px;
}
#header a { text-decoration:none; }
#header a i { color:#007dc4; }

[eluser]darrentaytay[/eluser]
Umm, the order doesn't make a difference in CSS as far as I am aware.