What does it do?
Let's see just a few of what we can do with LESS:@nice-blue: #5B83AD;
@light-blue: (@nice-blue + #111);
#header { color: @light-blue; }
// LESS
.rounded-corners (@radius: 5px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
-ms-border-radius: @radius;
-o-border-radius: @radius;
border-radius: @radius;
}
#header {
.rounded-corners;
}
#footer {
.rounded-corners(10px);
}
/* Compiled CSS */
#header {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}
#footer {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
}
How to include LESS in a project?
That's easy! Just write your stylesheets as a .less file and link it to your page with the rel set to “stylesheet/less”:<link href="styles.less" rel="stylesheet/less" type="text/css"></link>
Then download less.js from lesscss.org, and include it in the <head> element of your page:
<script src="less.js" type="text/javascript"></script>
Make sure you include your stylesheets before the script.
That way, the less stylesheet will be compiled into css stylesheet at runtime, but, if you prefer (and that is recommended), you can pre-compile your less file as well. For that install the LESS Command-line on your machine and call:
$ lessc styles.less > styles.css
Even, there are some tools where you can integrate the command-line on your IDE to automatize the process. Per example, on Grails, we have the Less CSS Resources plugin what compiles specified .less files into their .css.
So...
So that was just a view on LESS, if you want to really know about it visit its official site on lesscss.org.
No comments:
Post a Comment