The dynamic stylesheet language – LESS

Today, when exploring the professional blogs, I came up with a link for LESS. I first thought that it’s one of those JavaScript framework libraries copy cat, and was just about to skip that. When out of curiosity, I clicked on it, and then I couldn’t stop myself until I read all the features of this CSS framework.

My expression after reading this was “This is simply AWESOME”. The reason I liked it so much is because I myself have thought to write something similar in past. Especially, I had hated CSS most when I have to add repeated CSS tags each of different browsers support (like for border, transformation, shadows, etc). I’m glad that someone else thought about this, and wrote it.

Here are few LESS CSS examples which are very simple to understand and use, yet very powerfull:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

@base: #f938ab;
 
.box-shadow(@style, @c) when (iscolor(@c)) {
  box-shadow:         @style @c;
  -webkit-box-shadow: @style @c;
  -moz-box-shadow:    @style @c;
}
.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
  .box-shadow(@style, rgba(0, 0, 0, @alpha));
}
.box {
  color: saturate(@base, 5%);
  border-color: lighten(@base, 30%);
  div { .box-shadow(0 0 5px, 30%) }
}

And here is my favorite, using rules:

1
2
3
4
5
6
7
8
9
10
11

#header {
  h1 {
    font-size: 26px;
    font-weight: bold;
  }
  p { font-size: 12px;
    a { text-decoration: none;
      &:hover { border-width: 1px }
    }
  }
}

And all you need to convert these LESS CSS files to actual browser compatible CSS files is include the LESS JavaScript API. The code for this goes like (need to download the less.js from LESS website):

1
2

<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>

I will soon be using this in some hobby or professional upcoming projects. You guys do give it a try as well.

Tags: CSS, Framework, LESS

This entry was posted on Sunday, August 5th, 2012 at 7:05 pm and is filed under HTML & CSS. You can follow any responses to this entry through the RSS 2.0 feed.
You can leave a response, or trackback from your own site.