Colin Robinson

LESS: The dynamic stylesheet language

Wow, just wow. Imagine if you could use variables in CSS… now you can.

Here is the LESS website. The proposed method of using LESS is to write a style.less file and then include less.js which uses javascript to render your stylesheet dynamically. I really don’t like the idea of having to load an extra JS file and then generating the stylesheet on the fly. Talk about unnecessary overhead. But the LESS website loads quickly, even on my phone, so I guess the results speak for themselves. Visiting the page with javascript turned off was disappointing, but not unexpected. Thankfully they also made a command line tool that you can use to compile a .less file into a .css one. Use the compiler for production releases and the JS framework for prototyping. I’ll definitely being using LESS in my next project.

You would write something like this in LESS

@color: #4D926F;
#header {
    color: @color;
}
h2 {
    color: @color;
}

and then get back this

#header {
    color: #4D926F;
}
h2 {
    color: #4D926F;
}

You can even write functions! This code

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

#header {
  .rounded-corners;
}
#footer {
  .rounded-corners(10px);
}

would be compiled into

#header {
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
}
#footer {
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
}

This is how CSS should have worked from the start.

One Response to “LESS: The dynamic stylesheet language”

Leave a Reply to Sascha Cancel reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.