![\"LessCSS](\"https:\/\/www.chipwreck.de\/blog\/wp-content\/uploads\/2011\/02\/less.png\" "\\"less\\"")
<\/figure>\n\n\n\nExamples, please<\/h3>\n\n\n\n
A short example:<\/p>\n\n\n\n
@linkcolor:\t\t#9999C9;\n@spacing_left:\t\t60px;\n\n.rounded(@radius: 3px) {\n -webkit-border-radius: @radius;\n -moz-border-radius: @radius;\n border-radius: @radius;\n}\n\n.navi {\n\t.rounded(5px);\n\ta {\n\t\tcolor: @linkcolor;\n\t}\n}\n\ndiv.navigation {\n\tpadding-left: @spacing_left;\n}\n<\/pre>\n\n\n\nSo you can define variables (like colors, distances etc.), which then can be used in the rest of the file – great to have all used colors in one place only. Furthermore there are user-defined functions<\/q>, like .rounded<\/q> here, a shortcut to add the three possible border-radius methods. You can even add parameters (in this case radius) with a default value. And nested classes (.navi a) can be written more naturally.<\/p>\n\n\n\nAnd there’s more<\/h3>\n\n\n\n
There are also operators and functions:<\/p>\n\n\n\n
.darker {\n\tcolor: darken(@mycolor, 10%);\n\tbackground-color: lighten(@mybg, 15%);\n\tpadding-right: @spacing_left * 2;\n\tpadding-bottom: (@spacing_left + 5) * 2;\n}\n<\/pre>\n\n\n\nA complete list of all possible features can be found on the lesscss.org<\/a> website.<\/p>\n\n\n\nHow to use<\/h3>\n\n\n\n
So we’ve got a kind of CSS+ with one single disadvantage – not a single browser can understand LessCSS. Therefore the .less-files have to be “compiled” (=translated to ordinary CSS) before they’re sent to the Browser. There are different ways: You can automatically compile them on the server (usually with PHP), or you can use less.js<\/q>, a javascript which handles the translation in the frontend – or you can use Less.app (Mac only).<\/p>\n\n\n\nLess.js<\/a> is quite easy to use: Instead of including the css-file you simply put this in your (development) page header:<\/p>\n\n\n\n<link rel=\"stylesheet\/less\" type=\"text\/css\" href=\"site.less\">\n<script type=\"text\/javascript\" src=\"less-1.0.41.min.js\"><\/script>\n<\/pre>\n\n\n\nLess.app<\/a> is a great OS X application, which monitors the folders where you put your Less-files and automatically creates the corresponding CSS-file, with error checking and minification if desired.<\/p>\n\n\n\nBut…<\/h3>\n\n\n\n
I read some discussions on the web whether extending CSS is (by itself) a good idea or not. Most criticism is around these three points:<\/p>\n\n\n\n
1. It’s an additional step in your development process\/adds another layer of complexity<\/h5>\n\n\n\n
Yes, so does mootools\/jquery and so does a CSS-reset. But would you recommed not using mootools\/jquery, because it’s an additional layer? Usually not. The additional complexity is there only once – at the beginning, when you have to learn LessCSS. As soon as you use it in the second or third project this initial effort soon begins to fade.<\/p>\n\n\n\n
2. Performance gets worse<\/h5>\n\n\n\n
If you include less.js and put everything online, this is true: The additional javascript and parsing takes a little bit more time. But less.js is IMHO not meant to be put online, it’s a development tool<\/em>. So I recommend putting the resulting CSS file online and remove the less.js – much like you’d include a non compressed JS-library while debugging and the yc-compressed one later.<\/p>\n\n\n\n3. You can’t debug correctly anymore<\/h5>\n\n\n\n
When using Firebug or a similar tool, you work with the resulting CSS. So the line numbers are not correct anymore and if you change values, you change them in the resulting classes only. That might be a valid point for some people – but maybe someone writes a firebug extension one day..<\/p>\n\n\n\n
IDE\/Editor-Support<\/h3>\n\n\n\n
Since LessCSS is quite a new development I was surprised that for example PHPStorm natively supports LessCSS – not only does it syntax highlighting, but also error checking, auto complete and much more<\/a>. There are also syntax-modes here<\/a>, here<\/a> and here<\/a> for Coda and some plugins for TextMate (here<\/a> or here<\/a>).<\/p>\n\n\n\nMore<\/h3>\n\n\n\n
More information about LessCSS can be found on the lesscss website<\/a> or here<\/a> or here<\/a>.<\/p>\n\n\n\n