iShareCodes: css

Basically, LESS is an extension for CSS with dynamic behavior such variables, mixins, operations and functions. With LESS we can better organize our stylesheets and spent less time writing them, this is really helpful. Even on LESS if you don't know how to do something specifically you can just write the original CSS code for that. As a developer I can say that LESS is what lacked on CSS.

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.

*those examples were got from lesscss.org.

iShareCodes

Thursday, November 29, 2012

LESS: The Extended CSS

What does it do?

How to include LESS in a project?

So...