In a nutshell, Less CSS is a tool that lets you simplify your CSS style sheet and allows you to extend limited CSS functionality by introducing variables, mixins, operations and nested rules. The original implementation is written in Ruby; however, there is a PHP solution based on LESS CSS called lessphp. The definition of lessphp from the project’s website is as follows:
lessphp is a compiler that generates css from a small superset language that adds many additional features seen in other languages. It is based off an original Ruby implementation called LESS (http://lesscss.org/). For the most part, lessphp is syntactically compatible with LESS, with the exception of a few things…
So why use lessphp? Because it can speed up CSS development, mainly by using the features of less. Your CSS code is much simpler, cleaner and nicely structured and better organised. The tradeoff is the fact that lesscss code needs to be compiled after each change is introduced. Moreover, on one project, we found out that web designers do not always write CSS with DRY principles in mind, and lack of time to work with designers on that introduced some problems.
LESS features
A traditional CSS style sheet could look like this:
body { color: #999; }
body a { color: #f60; }
body a:hover { color: #91A9CD; }
LESS lets you simplify and structure the code:
body {
color: #999;
a {
color: #f60;
:hover {
color: # 91A9CD;
}
}
}
Variables
Variables allow you to specify a value, such as a font colour, in a single place and use that value throughout the style sheet. The main benefit here is ease of future maintenance. Changing a font colour requires changing just one line of code, instead of doing search and replace across the entire style sheet. Variables are defined with a name starting with @:
@fontcolor : #999;
body {
color: @fontcolor;
}
Mixins
So far we know that lessphp allows you to specify variables and use them across a style sheet. But more often you will have an entire class you want to re-use. This is easy – just define the class first and then use its name as one of the properties in other classes:
.myclass {
font: 12px/1.5Arial,FreeSans,sans-serif;
padding: 5px;
text-align: center;
p {
background-color: black;
}
}
pre {
.myclass;
}
div.text {
.myclass;
margin: auto 0;
font-weight: bold;
}
Any block can be “mixed” into the current block for organisational purposes. You can use the > namespace operator to do that. Moreover, lessphp allows you to pull out just a specific definition declared within a block. Use the [ ] operator to achieve this:
div#mixed {
.myclass > p;
padding: .myclass['padding'];
}
Moreover, mixins can behave like functions and take arguments, which gives you even more flexibility:
.rounded_corners (@radius: 7px) {
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
border-radius: @radius;
}
.block {
.rounded_corners;
}
#feature_content {
.rounded_corners(10px);
}
lessphp also introduces abstract blocks, meaning that you can define blocks that are not included in output, for use in mixins and to keep your style sheet clean. You can define abstract blocks the same way as CSS classes, but you start their name with @:
@abstract {
color: blue;
background-color: white;
}
.block {
@abstract;
margin: 0 2em;
}
Nested rules
The main goal of nested rules is to limit the number of repeated tag names you have to type. Look at the example from the beginning of this post – that’s exactly how nested rules are used:
body { color: #999; }
body a { color: #f60; }
body a:hover { color: #91A9CD; }
body {
color: #999;
a {
color: #f60;
:hover {
color: # 91A9CD;
}
}
}
Instead of repeating the body tag at least three times, you can structure your code in a hierarchical way. Besides removing the need to repeat tags, nested rules also help you to group related items together.
Operations
lessphp gives you the ability to make operations on number and colour value types. For instance, instead of creating a new declaration for slightly bigger font size and darker colour, you can perform operations on already defined variables:
@base_size: 12px;
@base_color: #eee;
.header {
font-size: @base_size + 4px;
color: @base_color + #111;
}
Multiple .less files
As you can see, lessphp gives you a lot of flexibility to keep your code structured and organised. Moreover, you can keep definitions for specific entities in separate files. Here is the content of a main.less file from one of the projects I worked on:
robert@robert-ibuildings:~/projects/xxx/assets/lessphp$ cat main.less
@CHARSET "UTF-8";
@import "includes/text.less";
@import "includes/effects.less";
@import "includes/layout.less";
@import "includes/search.less";
@import "includes/profile.less";
@import "includes/product.less";
@import "includes/category.less";
@import "includes/merchant.less";
@import "includes/reviews.less";
Less uses the @import directive to combine multiple .less files into a single CSS file during compilation.
PHP Interface
So far we’ve ended up with multiple .less files; now it’s time to combine them into one CSS file.
The easiest way is to use a static function when the page is requested:
lessc::ccompile('main.less', 'styles.css');
However, for more optimal results we incorporated less compilation into our deployment process using ant:
robert@robert-ibuildings:~/projects/xxx/build$ cat lessphp.sh
#!/bin/bash
plessc_exe=readlink -f ../dev/lessphp/plessc
input_dir=readlink -f ../application/assets/lessphp
output_dir=readlink -f ../public/css/
for file in ${input_dir}/*.less
do
output_file=${file#/*/lessphp}
output_file="${output_dir}${output_file%.less}.css"
echo "---"
echo " ${output_file}"
echo "---"
$plessc_exe ${file} ${output_file}
done;
And then Ant target:
<target name="lessphp">
<exec executable="./lessphp.sh" dir="${basedir}/build/" failonerror="on">
</exec>
</target>
Conclusion
Initially I was slightly pessimistic towards lessphp, not really seeing the benefits of using it when you can write CSS so easily. However, after using it for a while I realised how good the tool is, enabling you to keep CSS style sheets clean and to reuse lots of blocks throughout your scripts.