OpenCart Community

Posted: **Mon May 21, 2012 8:47 pm**

Integrate LessPHP with Opencart is not as hard as I thought before. Here, I will show you how to do it and you can start to use variables, nesting, operations, and mixins etc within your stylesheet, read LessPHP docs for features explanation.

Integration

Download LessPHP
Extract and copy lessc.inc.php to system\library\
Now you can use $this->load->library('lessc.inc'); to load the LessPHP class.
When it come to update, just replace the lessc.inc.php with the new one.

Usage Example

Create stylesheet.less on catalog\view\theme\yourtheme\stylesheet\less\
And use this code as a test:

Code: Select all

.color(@color:#222) { color:@color; }
.bgcolor(@bgcolor:#eee) { background:@bgcolor; }

body {
	width:@width;
	margin:10px auto;
	.color(@color);
	.bgcolor(@bgcolor);
}
a { .color(@color!important); }

Put this code on catalog/controller/common/header.php or simply use vQmod file on attachment.

Code: Select all

$this->load->library('lessc.inc'); // Load LessPHP
$styleFolder = 'catalog/view/theme/' . $this->config->get('config_template') . '/stylesheet/';

$style_setting = array ( // Setting to overide LessPHP variable
	'width'		=> '1000px',
	'color'		=> 'red',
	'bgcolor'	=> '#e3eff2 url("../image/close.png") repeat'
	//'bgcolor'	=> '#e3eff2'
);

$lessFile	= $styleFolder . 'less/stylesheet.less'; // Input Less stylesheet
$cssFile 	= $styleFolder . 'stylesheetLess.css'; // Output stylesheet

if(file_exists($lessFile) && is_writable($styleFolder)){ // Check does .less file is available and stylesheet folder is writable
	$lessNew		= new lessc($lessFile);
	$lessParse	= $lessNew->parse(null, $style_setting); // Parse variable
	
	$hashCss = file_exists($cssFile) ? sha1_file($cssFile) : '';
	$hashLess = sha1($lessParse);
	
	if ($hashCss != $hashLess) { // Check does the Hash above is different. If yes, generate new stylesheet.
		file_put_contents($cssFile, $lessParse);
	}
	
	$this->document->addStyle($cssFile);
}

Now you will see new file: catalog\view\theme\default\stylesheet\stylesheetLess.css
Result:

Code: Select all

body {
  width:1000px;
  margin:10px auto;
  color:red;
  background:#e3eff2 url("../image/close.png") repeat;
}
a { color:red !important; }

Load your site to see the result.

Download - 1.39 KiB

lessphp_opencart_usage_sample.xml Downloaded 531 times

Download - 1.39 KiB

Posted: **Mon May 21, 2012 10:00 pm**

Very cool... I like the concept of less, but I just wish it was more widely adopted like smarty was.

Posted: **Tue May 22, 2012 9:49 am**

indeed LessPHP is useful to generate css with dynamic value from theme setting or use it on development stages to provide faster and standarize stylesheet code.

Posted: **Sun Jan 13, 2013 2:37 am**

in this way @import file changes will not be detected. Try this method.

Code: Select all

function autoCompileLess($inputFile, $outputFile) {
  // load the cache
  $cacheFile = $inputFile.".cache";

  if (file_exists($cacheFile)) {
    $cache = unserialize(file_get_contents($cacheFile));
  } else {
    $cache = $inputFile;
  }

  $less = new lessc;
  $newCache = $less->cachedCompile($cache);

  if (!is_array($cache) || $newCache["updated"] > $cache["updated"]) {
    file_put_contents($cacheFile, serialize($newCache));
    file_put_contents($outputFile, $newCache['compiled']);
  }
}

autoCompileLess('myfile.less', 'myfile.css');

Source : http://leafo.net/lessphp/docs/#compiling_automatically

Happy Coding

OpenCart Community

Using LessPHP with Opencart

Using LessPHP with Opencart

Re: Using LessPHP with Opencart

Re: Using LessPHP with Opencart

Re: Using LessPHP with Opencart