Use LESS in Opencart

Here, we will learn how to integrate LESS styling with the Opencart. First of all, we have to download the composer installer in the root of our Opencart using the command:

curl -s http://getcomposer.org/installer | php

Then, we have to create a composer.json file in the root and put the following lines into it:

{
    "require": {
        "leafo/lessphp": "0.4.0"
    }
}

After pasting the above lines, we have to install the dependencies using the command:

php composer.phar install

It will create a vendor folder by default in which the LESS packages will be stored. To make an access to these files, I have included the package in the controller ‘module/less.php’. So, here’s the code of controller in which I have written the LESS hard-coded.

<?php
class ControllerModuleLess extends Controller {
 public function index() {
 $this->load->language('module/less');

 $data['heading_title'] = $this->language->get('heading_title');

 require_once('vendor/leafo/lessphp/lessc.inc.php');
 $less = new lessc;

 $css = "@base: 24px;
 @border-color: #B2B;

 .underline { border-bottom: 1px solid green }

 #header {
 color: black;
 border: 1px solid @border-color + #222222;

 .navigation {
 font-size: @base / 2;
 a {
 .underline;
 }
 }
 .logo {
 width: 300px;
 :hover { text-decoration: none }
 }
 }";

 $data['css'] = $less->compile($css);

 if (file_exists(DIR_TEMPLATE . $this->config->get('config_template') . '/template/module/less.tpl')) {
 $this->response->setOutput($this->load->view($this->config->get('config_template') . '/template/module/less.tpl', $data));
 } else {
 $this->response->setOutput($this->load->view('default/template/module/less.tpl', $data));
 }
 
 }
}

The LESS must be written in the separate file.

The LESS can also be read directly from a file and compiled as $less->compile(‘file_path’);

Here, is the simple code of the view file of less just showing the CSS:

<h3><?php echo $heading_title; ?></h3>
<style>
<?php echo $css; ?>
</style> 

The output in the front end can be seen by inspecting in HTML and it is as shown:

LESS INTO CSS

For a thorough knowledge of the LESS, please do visit LESS Documentation.

Vikhyat Sharma 6 Badges

• 23 Mar, 2016
  Created by - Vikhyat Sharma