Writing more with less

Roy van der Meij wo 30 jun 10

So you would like to use variables and inheritance with css? Now you can! With less.js.

So what is less?
With less you can do exactly what I stated above. Let’s check out some code.

@brand_color: #4D926F;

#header {
  color: @brand_color;
}

h2 {
  color: @brand_color;
}

How awesome is that :)
But what I like more is the inheritance part.

#header {
  color: red;
  a {
    font-weight: bold;
    text-decoration: none;
  }
}

Right now less is a gem and a plugin for rails, but they rewritten it entirely in javascript. So you can now use it without any use of a backend.
Just place this in your head tag.

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

And have fun in your stylesheets/style.less file :-)

For more info check out these links:
lesscss.org
less.js on github
less tutorial

Gepost in hor |  1 reactie