How to use LESS CSS in CakePHP application

CakePHP is a marvelous framework, it helps us building powerful web application in short amount of time, even though it quite hard to get started, but once you know the flow and the conventions, it can saves at least 30% of your development time. Now I want to show you how to use LESS in CakePHP applications to increase productivity even further.

Introduction to LESS

For those who doesn’t know about LESS, it’s time to explore and start playing with it. LESS can help us writing less codes and at the same time offers reusable codes for our CSS. According to their website:

LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions.

Let’s take a look the simple example. As you can see, the codes below is almost identical to normal CSS codes, except LESS introduce more features like variables, functions, operations and mixins.

LESS

@shadow(@x: 0; @y: 2px; @blur: 3px; @color: rgba(0, 0, 0, 0.3)) {
	-moz-box-shadow: @x @y @blur @color;
	-webkit-box-shadow: @x @y @blur @color;
	box-shadow: @x @y @blur @color;
}

@rounded(@radius: 3px) {
	-moz-border-radius: @radius;
	-webkit-border-radius: @radius;
	border-radius: @radius;
}

#main_container {
	@rounded;
	@shadow;
}

#side_container {
	@rounded(10px);
	@shadow(0; 5px; 10px; rgba(0, 0, 0, 0.9));
}

#footer_container {
	@rounded(5px);
	@shadow(0; 3px; 5px; rgba(255, 255, 255, 0.5));
}

Now let’s take a look to the output produce by LESS.

#main_container {
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	-moz-box-shadow: 0 2px 3px rgba(0,0,0,0.3);
	-webkit-box-shadow: 0 2px 3px rgba(0,0,0,0.3);
	box-shadow: 0 2px 3px rgba(0,0,0,0.3);
}
#side_container {
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	-moz-box-shadow: 0 5px 10px rgba(0,0,0,0.9);
	-webkit-box-shadow: 0 5px 10px rgba(0,0,0,0.9);
	box-shadow: 0 5px 10px rgba(0,0,0,0.9);
}
#footer_container {
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	-moz-box-shadow: 0 3px 5px rgba(255,255,255,0.5);
	-webkit-box-shadow: 0 3px 5px rgba(255,255,255,0.5);
	box-shadow: 0 3px 5px rgba(255,255,255,0.5);
}

Isn’t that great? With LESS we can define some most common styling as functions and we pass the argument to override the default values; just like other programming languages. And we don’t have to re-write all those CSS3 codes with vendor prefix over and over again. Define it as functions and re-use when we need.

Enough with the LESS already, you can learn more about it on their website. Now I want to show how to use LESS in our CakePHP applications and compile it every time we load our application, so we can link the output file directly.

Using LESS with CakePHP

At the moment, I’m in the middle building an e-commerce site for my client and I need to put some styling, so I decided to add LESS to my application. On their website, they offer Javascript to parse the LESS files. Nope, we not going to use it. Instead, we will use lessphp library to compile it on runtime and create the CSS file for our application.

Download lessphp

Get the source from the website or you can get the most latest version from Github.

Now extract the file and copy lessc.inc.php to your /app/vendors and rename it to lessc.php.

Call it in AppController

Open up your /app/app_controller.php and add the function below:

	public function beforeRender()
	{
		// only compile it on development mode
		if (Configure::read('debug') > 0)
		{
			// import the file to application
			App::import('Vendor', 'lessc');

			// set the LESS file location
			$less = ROOT . DS . APP_DIR . DS . 'webroot' . DS . 'less' . DS . 'main.less';

			// set the CSS file to be written
			$css = ROOT . DS . APP_DIR . DS . 'webroot' . DS . 'css' . DS . 'main.css';

			// compile the file
			lessc::ccompile($less, $css);
		}
		parent::beforeRender();
	}

Create files and folders

On your /app/webroot directory, create new folder and name it as less, followed by creating an empty file and name it main.less.

Now create another empty file inside your /app/webroot/css directory and name it main.css. This will be the output file we will use in our application.

Link to application

Now you can link the CSS file in your /app/views/layouts/default.ctp using HtmlHelper:

<?php $this->Html->css('main'); ?>

Done! Now write all your LESS codes to /app/webroot/less/main.less and every time the application running, lessphp will compile the code to CSS file automatically.