I’ve been playing around with modifying Wordpress themes again. Taking my existing “ogboumatic” theme and re-writting the CSS using Less CSS. LessCSS makes CSS much clearer by adding variables, embedded rules and mixins.

To convert my existing CSS to LessCSS all I had to do was re-name it from *.css to *.less. I then wrote a simple Rake script which invokes the LessCSS parser. The LessCSS will take un-modified CSS files as an input, making it very easy to adapt existing stylesheets.

It was then very easy to start adapting some of the existing CSS to take advantage of LessCSS’ features. I created several variables for my colours:

<pre name=”code” class”css”>@colour_white: #FFF @colour_darkblue: #686F6F</pre>

I simply iterated through my CSS file replacing the all #686F6F with @colour_darkblue. Now to change the colour scheme of my CSS I only have to change value of the @colour_darkblue variable.

The boumatic theme which I adapted for ogboumatic used rounded corners in various rules. Using LessCSS I was able to change this to use a Mixin: <pre name=”code” class”css”>.rounded_bottom (@radius: 5px) { border-top: none; border-left: none; border-right:1px solid @colour_border; border-bottom:1px solid @colour_border; -moz-border-radius-bottomright: @radius; -webkit-border-bottom-right-radius: @radius; border-bottom-right-radius: @radius; }</pre> I can then apply this Mixin to other CSS rules - for example: <pre name=”code” class”css”> input#submit, input#searchsubmit { .rounded_bottom; … } #header { .rounded_bottom; }</pre> It is possible to avoid using Mixins by re-structuring the CSS combining the rules: <pre name=”code” class”css”>input#submit, input#searchsubmit, #header { … }</pre> I have found that this quickly becomes un-managable. I like to group the rules to particular page components together. If I was to combine the rules as above I would have CSS rules related to the “header” in various parts of the stylesheet. Another advantage of using Mixins it the ability to pass variables. The following code for example would set the @radius variable for the Mixin. <pre name=”code” class”css”>input#submit { .rounded_bottom(10px) }</pre> LessCSS also allows you to structure your CSS according to the rules. For example the following CSS can be re-written: <pre name=”code” class”css”>ul {   color: blue; } ul li {    color: green; } ul li.selected {   color: black; }</pre> <pre name=”code” class”css”>ul {   color: blue;   li {     color: green;   }   li.selected {     color: black;   } }</pre>