Post by qahar » 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
  1. Download LessPHP
  2. Extract and copy lessc.inc.php to system\library\
  3. Now you can use $this->load->library('lessc.inc'); to load the LessPHP class.
  4. When it come to update, just replace the lessc.inc.php with the new one.
Usage Example
  1. 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); }
  2. 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);
    }
    
  3. 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; }
    
  4. Load your site to see the result.

User avatar
Expert Member

Posts

Joined
Tue Jun 29, 2010 10:24 pm
Location - Indonesia

Post by Qphoria » 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.

Image
Donate!|OpenCart Basics|GeoZones
Image


User avatar
Administrator

Posts

Joined
Tue Jul 22, 2008 3:02 am

Post by qahar » 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.

User avatar
Expert Member

Posts

Joined
Tue Jun 29, 2010 10:24 pm
Location - Indonesia

Post by ijasnijas » 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 :) :joker:

Newbie

Posts

Joined
Sun Jan 13, 2013 2:33 am
Who is online

Users browsing this forum: No registered users and 1 guest