Nowadays everyone is looking to “write less, do more” (jQuery). There are all sorts of frameworks and libraries that make your developer life much easier. But sometimes there are downsides, because web browsers show a bit of personality and have their own way to deal with standards.

Right now everybody loves CSS3 (so do I) because it has a lot of cool features that improves the workflow alot. You can do stuf with CSS3 that some time ago was posible only with images and many hacks involved. So it’s easier now to do rounded corners, shadows, gradients and much more, even CSS animations directly from the stylesheet.

So what’s the problem with CSS3?

Perfect, you could say, but there are two major problems:

1. Alot of duplicate code

We think is named CSS3 because you’ll need to write every property at least three times. (Browsers point of view)

2. Complex properties (with nice output) but even harder code management

Quick CSS3 only notifications (no images)

1. Simple, yellow notice

HTML

1
<p class="notice">Some message users should see and remember.</p>

CSS

1
2
3
4
5
.notice{
    background-color:#ffc;
    border:1px solid #e6e6b8;
    padding:9px;
}

2. How about some rounded corners and a gradient for Firefox3.6+ users?

CSS

1
2
3
4
5
6
7
.notice{
    background-color:#ffc;
    border:1px solid #e6e6b8;
    padding:9px;
    background-image: -moz-linear-gradient(top, #fff, #ffc); /* FF3.6 */
    -moz-border-radius:5px;
}

3. Good job but two more please: a green notice for success and a red one for error.

HTML

1
2
3
<p class="notice">Some message users should see and remember.</p>
<p id="success" class="notice">Some success message users should see and remember.</p>
<p id="error" class="notice">Some error message users should see and remember.</p>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.notice{
    background-color:#ffc;
    border:1px solid #e6e6b8;
    padding:9px;
    background-image: -moz-linear-gradient(top, #fff, #ffc); /* FF3.6 */
    -moz-border-radius:5px;
}
#success{
    background-color:#cfc;
    border-color:#b8e6b8;
    background-image: -moz-linear-gradient(top, #fff, #cfc);
}
#error{
    background-color:#fcc;
    border-color:#e6b8b8;
    background-image: -moz-linear-gradient(top, #fff, #fcc);
}

4. I guess not everybody is using Firefox so we should consider that too.

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
.notice{
    background-color:#ffc;
    border:1px solid #e6e6b8;
    padding:9px;
    background-image: -moz-linear-gradient(top, #fff, #ffc); /* FF3.6 */
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#ffc)); /* Saf4+, Chrome */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff', endColorstr='#ffc'); /* IE6,IE7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff', endColorstr='#ffc')"; /* IE8 */
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
}
#success{
    background-color:#cfc;
    border-color:#b8e6b8;
    background-image: -moz-linear-gradient(top, #fff, #cfc); /* FF3.6 */
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#cfc)); /* Saf4+, Chrome */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff', endColorstr='#cfc'); /* IE6,IE7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff', endColorstr='#cfc')"; /* IE8 */
}
#error{
    background-color:#fcc;
    border-color:#e6b8b8;
    background-image: -moz-linear-gradient(top, #fff, #fcc); /* FF3.6 */
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#fcc)); /* Saf4+, Chrome */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff', endColorstr='#fcc'); /* IE6,IE7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff', endColorstr='#fcc')"; /* IE8 */
}

So we’ve got some nice looking notifications but the code is complicated, the properties for gradients are long and repeat constantly. What can we do?

Solution: Just write LESS!

The word game is nice but what exactly is it? LESS is a library that extends CSS by adding many cool features like: variables, mixins, nested inheritance and operations, but keeping the CSS syntax. First was made in ruby but is available for some time in javascript too (people say that is many times faster now). It’s quite fun and interesting to write more effective CSS but without learning a new language (like we use to do with Sass).

Because is written in javascript you can use it on many different types of projects and the less stylesheet will be converted even faster on fly. If you are not confortable with js version, you can use the ruby one or other extensions like Textmate/E-TextEditor Bundle, to convert from the beginning to CSS. Now let’s learn some basics.

The basics of using LESS for CSS coding

1. Link the less stylesheet

1
<link rel="stylesheet/less" href="style.less" type="text/css" />

2. Include less.js

3. That’s it, now let’s do some magic.

Variables

1
@bg_color:#ffc;

Operations (this is cool)

1
2
3
4
5
.notice{
    background-color:#ffc;
    border:1px solid #ffc*9/10; /* you get #e6e6b8 */
    padding:9px;
}

Mixins (functions with or without parameters)

1
2
3
4
5
6
7
8
9
10
.notice_ui(@bg_color:#ffc){
    background-color:@bg_color;
    border:1px solid @bg_color*9/10;
    padding:9px;}
.notice{
    .notice_ui;}
#success{
    .notice_ui(#cfc);}
#error{
    .notice_ui(#fcc);}

These are the basic features but it’s some powerful stuf that will come in handy when writing CSS.

Final CSS3 notifications code

Now we will rewrite our pure CSS3 notifications with LESS coding. Some variables, operations and mixins and the job’s done quickly. Take a look at the amount of code that we let behind but the result remains the same.

HTML

1
2
3
<p class="notice">Some message users should see and remember.</p>
<p id="success" class="notice">Some success message users should see and remember.</p>
<p id="error" class="notice">Some error message users should see and remember.</p>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.notice_ui(@bg_color:#ffc, @top_color:#fff, @radius:5px){
    background-color:@bg_color;
    border-color:@bg_color*9/10;
    background-image: -moz-linear-gradient(top, @top_color, @bg_color); /* FF3.6 */
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(@top_color), to(@bg_color)); /* Saf4+, Chrome */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@top_color', endColorstr='@bg_color'); /* IE6,IE7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='@top_color', endColorstr='@bg_color')"; /* IE8 */
    -moz-border-radius: @radius;
    -webkit-border-radius: @radius;
    border-radius: @radius;
    }
.notice{
    .notice_ui;
    border-width:1px; border-style:solid; padding:9px; margin:0 0 15px;
}
#success{
    .notice_ui(#cfc);}
#error{
    .notice_ui(#fcc);}

Now is your turn to tell the story: do you use LESS, what interesting things you developed using it or will you get started after reading this?

Further reading and help: Textmate/E-TextEditor Bundle

Tagged with: , , , ,