Part of the EllisLab Network
   
1 of 2
1
LessCss port to php, and now also to Codeigniter
Posted: 18 August 2010 12:27 PM   [ Ignore ]  
Summer Student
Total Posts:  2
Joined  08-18-2010

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 
File Attachments
LessCss_Library_For_Codeigniter(alpha)3.zip  (File Size: 54KB - Downloads: 305)
Profile
 
 
Posted: 18 August 2010 12:43 PM   [ Ignore ]   [ # 1 ]  
Sr. Research Associate
Avatar
RankRankRankRankRank
Total Posts:  4108
Joined  11-04-2008

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

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

WanWizard.eu | Modular CI, an HMVC solution | DataMapper ORM

Profile
 
 
Posted: 18 August 2010 03:57 PM   [ Ignore ]   [ # 2 ]  
Summer Student
Total Posts:  2
Joined  08-18-2010

@WanWizard

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

Updated it now.

Profile
 
 
Posted: 07 October 2010 11:07 AM   [ Ignore ]   [ # 3 ]  
Summer Student
Avatar
Total Posts:  7
Joined  10-26-2007

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

background-imageurl(@site_url'my_images/back.jpg'); 
Profile
 
 
Posted: 13 October 2010 10:11 AM   [ Ignore ]   [ # 4 ]  
Summer Student
Avatar
Total Posts:  16
Joined  09-22-2008

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?

 Signature 

Shaun Andrews (@shaunandrews)
http://upstateinteractive.com

stepOne, my current CI project: http://fever.upstateinteractive.com

Profile
 
 
Posted: 13 October 2010 10:33 AM   [ Ignore ]   [ # 5 ]  
Summer Student
Avatar
Total Posts:  7
Joined  10-26-2007

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

Profile
 
 
Posted: 03 March 2011 01:08 PM   [ Ignore ]   [ # 6 ]  
Summer Student
Total Posts:  4
Joined  03-03-2011

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

Profile
 
 
Posted: 03 March 2011 01:51 PM   [ Ignore ]   [ # 7 ]  
Lab Assistant
Avatar
RankRank
Total Posts:  106
Joined  09-18-2009

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

 Signature 

My Web Development Blog

Follow me on Twitter - darrentaytay

Profile
 
 
Posted: 03 March 2011 06:25 PM   [ Ignore ]   [ # 8 ]  
Summer Student
Total Posts:  4
Joined  03-03-2011

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

Profile
 
 
Posted: 03 March 2011 06:34 PM   [ Ignore ]   [ # 9 ]  
Lab Assistant
Avatar
RankRank
Total Posts:  106
Joined  09-18-2009

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

 Signature 

My Web Development Blog

Follow me on Twitter - darrentaytay

Profile
 
 
Posted: 03 March 2011 07:05 PM   [ Ignore ]   [ # 10 ]  
Summer Student
Avatar
Total Posts:  15
Joined  01-15-2011

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

 Signature 

MooTools Library for Javascript

Profile
 
 
   
1 of 2
1