Less.js Will Obsolete CSS

If you design websites you may have heard of interesting tools called CSS pre-processors. A couple of great ones are LESS and SASS.
Here’s an example of LESS code to give you an idea of what it does:

@brand-color: #3879BD;

.rounded(@radius: 3px) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    border-radius: @radius;
}

#header {
    .rounded(5px);
    a {
        color: @brand-color;
        &:hover {
            color: #000;
        }
    }
}

and then you would precompile it to some CSS. Not anymore, now you can natively link to the less:

HTML:

<link rel="stylesheet/less" href="/stylesheets/main.less" type="text/css" />
<script src="http://lesscss.googlecode.com/files/less-1.0.18.min.js"></script>
 

Now less.js will unpack the file and do its thing... making sure that the final CSS will be fully cacheable. Less.js has been written as a CommonJS module so you can run it on the server via node, or in the browser on the fly.


http://ajaxian.com/archives/do-less-with-less-js?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+ajaxian+%28Ajaxian+Blog%29
http://fadeyev.net/2010/06/19/lessjs-will-obsolete-css/