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
which can be downloaded at
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.
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
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
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.
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.
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.
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.
So you need to compile your Less CSS to a single (or multiple if you have many) file.
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.
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