Thread

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

//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

Why not make it CI standard, and convert it into a library, so you can do

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

@WanWizard

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

Updated it now.

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

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

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?

@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:

<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.

@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?

Doesn’t seem to be anything wrong with that Gregory?

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; }

Umm, the order doesn’t make a difference in CSS as far as I am aware.

The parent <—> child is important, not the order in the file. 😊

The order in the file is important. Selectors lower in the css file overwrite selectors prior to it.

Outside of this, in the example files of the script (and in every LESS example on other websites as well) the css also comes out the other way around.

So I assume something is wrong.

On the demo page of the original lessphp you can see that the css returns in a different order: http://leafo.net/lessphp/

I see…
I haven’t time to see the file now but later if nobody respond

.