OK, so we were about to reinvent the wheel when Antoine Abt suggested we take a look at lessphp, a very cool project by Leaf Corcoran starting to port LESS into PHP. We bit the bait and it paid off. Leaf was super-cool about us including the lib into the symfony plugin and we released a new and better plugin to use LESS in symfony. Updating the old CSS plugin with the new one using LESSphp made sense on several levels:

1) LESS augments CSS with some great features: variables, nested inheritance, mixins and accessors and other neat stuff.
2) LESS was already a popular Ruby gem, so it’s syntax is well documented. It should be fairly easy for the symfony community to start using it.
3) We are firm believers of “If something already exists and works well, don’t reinvent it.”
4) Leaf had already done most of the hard work. Porting it to symfony was an easy task.

How the plugin works

Download the plugin from http://www.symfony-project.org/plugins/sgLESSPlugin and install according to instructions. Once the plugin is installed, create a file ending with the extension .less in the /web/css folder of your application. In our case we created a file called main.less. What sgLESSPlugin will do is parse main.less and dynamically generate the output when accessed as /css/main.css, so in your view.yml, all you have to do is call:

1.stylesheets:    [/css/main.css]

Using LESS

The 5 main features of LESS are: variables, nested inheritance, mixins, accessors, and operations.

Variables
Variables allow you to define values of specific things like colors, font-family, width etc… in one place and use them elsewhere. The syntax to use variables is:

@pagewidth: 960px;
@purple: #5d2458;

body {
background-color: @purple;
}

.wrapper {
width: @pagewidth;
}

The output for this will be:

body {
background-color: #5d2458;
}

.wrapper {
width: 960px;
}

Nested inheritance

Nested inheritance is my OCD dream come true. Instead of writing out each rule separately I can nest them in a nice neat fashion.

.bottomnavigation {
width: @pagewidth;
a {
color: #000;
:hover {
color: #ffcc00;
}
}
}

Becomes:

.bottomnavigation {
width: 960px;
}

.bottomnavigation a {
color: #000;
}

.bottomnavigation a:hover {
color: #ffcc00;
}

Mixins

Mixins are classes that allow other rules to be embedded in them.

.round_corners {
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;

}

#pricebox {
.rounded_corners;
}

#promobox {
.rounded_corners;
background-color: #fc0000;
}

Becomes:

.round_corners {
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;

}

#pricebox {
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}

#promobox {
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
background-color: #fc0000;
}

Accessors

Accessors allows you to access values in other classes.

.article {
color: #010101;
}

.comment {
color: .article['color'];
}

Becomes:

.article {
color: #010101;
}

.comment {
color: #010101;
}

Operations
Operations let you add, subtract, divide and multiply property values and allow you to change multiple values proportionally.

@borderwidth: 2px;

.boxBorder {
border: @borderwidth * 3 solid #ccc;
}

Becomes

.boxBorder {
border: 6px solid #ccc;
}

That’s the simple explanation. To explore further, check out the lessPHP homepage or http://lesscss.org/.