LESS CSS


This is a brief overview and example of how LESS CSS works
To see the original documentation go to http://lesscss.org

My working example is
http://glynrob.com/examples/lesscss/index.html

which can be downloaded at
https://github.com/glynrob/lesscss

How less works:

Less allows you to shorten the CSS code that you write allowing you to reuse allot of the styles you have made again and again.
It compiles your LESS code into the correct CSS for your page so the browser can implement the styles into your website.

compiles to

HTML Code

Very simply you add in your less style sheet and the less js file.
This example pulls the google hosted less version though you can download a more current one from their website if you wish.

After that your html is as you normally would build your page.
My example is just 3 buttons on a page

Comments

You can add comments to your LESS CSS files as you normally would on a normal stylesheet.
One thing to note is that the 2 different ways to comment allow one to remain in the compiled CSS and one to be removed.

/* THESE ARE PRESERVED IN COMPILED CSS */
// These are ignored in compiled CSS

Variables

When designing a website, the colours used are always slightly off the default html color options.
Red is something like: #BF3130 for example.
When adding new elements to the website you have to look back to find the actual hex value you are using to keep consistant.
Variables allow you to set these in the CSS and call upon them when required.

Mixins

.border-radius (@radius: 5px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
}
.btn{
  .border-radius(10px);
}

These are like functions in javascript
You add a function name and can pass variables to it.
This way you can call this mixin on any classes you wish and cut down your code allot.
This example allows me to add 1 line to any class to add a border radius to that class supporting cross browser.

Nested Rules

This allows you to write clean code so you can easily see what styles are being added to child styles.
So instead of

You can write

Clearly showing that hovering over an A tag would change the color of the text.
You can do this for any classes as many times as you would like.

Function options

http://lesscss.org/#reference for a full list of functions available
My example only uses desaturate for the sake of an example in my code.

Compiling

For live websites you would not want to use the javascript to provide the css for your website.
The browser may not allow javascript and the load time would be increased having to retrieve the javascript file before compiling the page.
So you need to compile your Less CSS to a single (or multiple if you have many) file.

Windows Compiler
http://winless.org/

Linux or Mac Compiler
You can install LESS on a server with node package manager
npm install -g less

And compile with:
lessc styles.less > styles.css -x

You can also make this process automated with your build script.

 

The build script can be a whole blog post on itself so if you are interested, look into something like Ant.

Finally you take out your original LESS css and javascript files and add in your new css stylesheet.
I would personally have some identifier for development and production in PHP (for example) so this would take effect automatically.
After you can commit and push your code updates live.
As simple as that.

Hope this help you get started with LESS CSS

Leave a Reply

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