{Less} is more?

Creative Commons Licence

{Less}

So today I had to go out on a school trip with my son, so I knew I had limited work time. I thought it was a good opportunity to catch up with the latest Prestashop news and the first stop was the Prestashop Blog. The first entry I read was an interesting (and well-reasoned) summary of the workflow for building themes by Pierre-Alain Leboucher, and at the end of the post I came across a reference to {less}.

I don’t mind admitting that I love reading about new technologies and techniques, and predictably a google search later and I was browsing various sites, and getting more and more hooked on the concept by the minute.

Some Background

{less} is an extension to CSS and is fully backwards compatible so you can start by using your existing CSS and re-working it to use the advanced features. The ultimate goal is to generate plain, standard CSS that browsers can understand, so {less} can be thought of as a form of CSS macro language. So what does {less} offer that plain old CSS doesn’t?

Variables

Variables allow you to define a value in a single location that can then be used throughout the rest of the stylesheet. You could for example define the entire palette of a design at the start of the stylesheet and could then change the colours in a theme merely by changes those single values. Variables are denoted by an @ sign followed by a name. e.g.

@linkcolor: #5d717e;
Mixins

Mixins allow a set of style rules to be reused in another style definition either entirely or in part. In order for a subsequent style to inherit the properties of a previously defined style you only need to include the original style in the definition e.g. consider the following css definition:

.title { color: #000; font-size: 14px; font-weight: bold; }

If we then have other titles to define we might want to use mixins to add the above properties to them as well:

h3#comment-title {
 .title;
 margin:10px;
}

An alternative form would be where we never want the .title declaration to appear in the final CSS (i.e. we never use it directly). In this case we use the same syntax as for variables, and it then exists as merely an abstract definition:

@title { color: #000; font-size: 14px; font-weight: bold; }
h3#comment-title {
 @title;
 margin:10px;
}

In addition to the above, mixins can act like functions and accept parameters, and you can opt to include only a specific element of the definition to mix in.

Operations

Instead of having to declare slightly larger margins or slightly lighter colors you can modify existing variables using operations e.g.

@dark-color: #555;
h4 {
  color: @dark-color + #666;
}
Nested Rules

Readability is greatly enhanced by being able to structure style rules better than in standard CSS. Nested rules allow us to group definitions, and as another side-effect reduces the amount of code you have to type. Instead of:

#comment { color: #999; }
#comment a { color: #f60; }
#comment a:hover { color: #91A9CD; }

You can use:

#comment {
    color: #999;
    a {
        color: #f60;
        :hover {
            color: # 91A9CD;
        }
    }
}

Implementing {less} in Pestashop

Hopefully you’ve already had a chance to play with my Prestashop Plugin code. In order for this to be easily implemented I chose to use the PHP variant lessphp (silly name really but hey-ho!). The first step is to grab the latest version of phpless code from github.

The main part of the "installation" is merely to copy lessc.inc.php to your Prestashop overrides/classes directory and rename it to lessc.php – I hope you weren’t expecting this to be hard!

The next step is to install the latest version of my Prestashop Plugin code and then you’re almost ready to test it out. For the purpose of my testing I decided to convert just the global.css file from a clone of the default Prestashop theme. Unfortunately at the time of writing this the css -> {less} converter in the distribution isn’t working so I used the online version of lessify for the initial conversion. I saved the output generated as global.less in a new less subdirectory of the theme. Now that we have our compiler in place and some code to process it’s time to add the magic to our theme’s functions.php file to handle the processing:

<?php
// file: /themes/mytheme/functions.php
// Lets play with less
if (filemtime(_PS_THEME_DIR_.'less/global.less') > filemtime(_PS_THEME_DIR_.'css/global.css'))
  try {
      lessc::ccompile(_PS_THEME_DIR_.'less/global.less', _PS_THEME_DIR_.'css/global.css');
  } catch (exception $ex) {
      trigger_error('lessc fatal error:<br />'.$ex->getMessage());
  }

As you can see from the above all we’re doing is checking if our .less file is newer than the global.css file, and if it is we generate a new global.css by processing our .less file. I did encounter a few issues with the .less file that the online processor created (there are a couple of minor errors that cause some orphaned commas to be created) but it was fairly simple to fix. It’s currently running on my Prestashop Demo Store if you want to see how accurate the conversion process is now after some minor tweaking. An example of the .less code as further modified by myself is below:

@input-button-default {
  background-repeat:no-repeat;
  background-position:top left;
  border:none;
  .bold;
  font-size:10px !important;
  .align_center;
  text-decoration:none !important;
  cursor:pointer;
  display:block;
  line-height:18px;
  height:18px;
  padding-bottom:2px;
}
input.button_mini {
  @input-button-default;
  color:black !important;
  width:30px;
  background-image:@button_mini;
}
input.button_small {
  @input-button-default;
  color:black !important;
  width:60px;
  background-image:@button_small;
}
input.button {
  @input-button-default;
  color:black !important;
  width:120px;
  background-image:@button_medium;
}
input.button_large {
  @input-button-default;
  color:black !important;
  width:180px;
  background-image:@button_large;
}
input.button_mini_disabled {
  @input-button-default;
  color:#888888 !important;
  width:30px;
  background-image:@button_mini;
}

I would love to here about other’s experiences using {less} so please leave a comment should you decide to have a play for yourself! Happy coding.

Sharing is caring!

Posted on June 16, 2011 | Related Categories: Development Resources, Tips and Tricks | 1 comment

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

One Response to {Less} is more?

  1. Mathias Schopmans says:

    SASS is way more than {LESS}

    You would love SASS’s @extend directive.

    http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#extend