Learn LESS in less than 20 minutes!

Ok i lied, 20 minutes are not enough, but i will make you understand the possibilities of LESS and made your first less CSS quickly and nicely!
This is no boring article, i swear!

If you don’t what is LESS you could read it here.
If you don’t understand why you should use it instead of pure CSS, then i tell you: ” Quit the bitching and follow the tutorial. ”
Less is fantastic, modern and saves tons of minutes of coding. You’ll love LESS when you read the whole article, so keep on reading.

First Step
Windows user? Hi mate! Download WinLess.
WinLess could be a bitch sometimes, but he compiles your LESS files to CSS when you save them, gives some sort of error check and minify. Actually this is the best less compiler for windows out there.
Second Step
Create a project, Netbeans or just a folder of windows, i don’t care. Give him a structure like this:

Actually i don’t know if you know it, but Netbeans has a pair of LESS modules available, LessCSS Module works just fine but even the SCSS Support is good enough.
Third Step
Fill this files.
– index.html, i bet you already know what you need to put here, make a test page with random stuff, you only need to import the styles.css like you usually do.
– styles.css, actually it’s empty. If you already have a stylesheet and you want to use it, just copy the code inside styles.less, without knowing nothing else.
– styles.less, the core of this article. For now leave it alone.
Forth Step
Configure WinLess like this:
Fifth Step
Minimize WinLess. Open the style.less file and repeat yourself: “Now i will not touche the styles.css anymore”
Less has the same syntax of CSS plus some sweet things
If you already have some CSS you could import it on the less version, it’s not a problem, but from now we’ll code smarter so i’ll teach you the basis of less.
But now try to save, as you see WinLess will popup a message if all went ok.
Now…

LESS HYPER FAST LEARNING GUIDE LIKE A BOSS

Less could save variables!

Think of having to do big changes to your css colors. It’s obviously your designer fault but you’ll waste precious hours you could spend on facebook.
Less declare variables, if used smartly they could become precious patners. Example:

CSS Version

#content{
color: #FFFFFF;
background-color: #333333;
}

#title{
color: #333333;
background-color: #FFFFFF;
}

LESS Version

@gray: #333333;
@white: #FFFFFF;

#content{
color: @gray;
background-color: @white
}
#title{
color: @white;
background-color: @gray;
}

Powerful indeed. You could easily change your colors with just 1 line editing, plus variables works with any kind of css parameters, think of them as a code replacer.

Less make your code cleaner

Css could be a pain in the ass sometimes when you have to make specific class and expressions, Less works like a sir make your job easier and cleaner.

CSS Version

body #container { width: 200px; }
body #container .first_item{ color: black; }
body #container .first_item h2{ color: gray; }
body #container .first_item p{ color: red; }
body #container .second_item{ color: black; }
body #container .third_item{ color: gray; }
body #container .third_item p{ color: green; }

LESS Version

body{
    #container{
        width: 200px;
        .first_item{
            color: black;
            h2{
                color: gray;
            }
            p{
                color: red;
            }
        }
        .second_item{
            color: black;
        }
        .third_item{
            color: gray;
            p{
                color: green;
            }
        }
    }
}

If you look at the LESS syntax (that i’d remind you that minify when compiled) it’s much more clearer and specific. You could find that LESS version is far more similar to HTML than CSS one and this is one of most useful pratice of LESS, giving you the chance to read your and your patners code istantly.

Less can declare functions

LESS functions are like a bunch of css rules accepting variables. Actually functions are not required but they are the most powerful feature of LESS, the more you are smart the more you could make your code short and reusable.

CSS Version

#icon_1{
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
#icon_2{
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
#icon_3{
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
}

LESS Version

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

#icon_1{
    .rounded-corners(5px);
}
#icon_2{
    .rounded-corners(10px);
}
#icon_3{
    .rounded-corners(15px);
}

Great feature, you could shorten big bunch of codes if you are smart enough to plan it early.

Less knows math

Self explains

LESS Version

@the-border: 1px;
@base-color: #111;
@red:        #842210;

#header {
  color: @base-color * 3;
  border-left: @the-border;
  border-right: @the-border * 2;
}
#footer { 
  color: @base-color + #003300;
  border-color: desaturate(@red, 10%);
}

LESS can import other .less files

Think of organizing your code in many .less files, one for variables, one for functions, one for fonts families. That’s what Bootstrap and Twitter guys do.
I will paste the bootstrap.less code, the power of this feature it’s that you could comment and cut out any part of your css anytime with just 2 digits, like i did:

LESS Version

/*!
 * Bootstrap v2.0.4
 *
 * Copyright 2012 Twitter, Inc
 * Licensed under the Apache License v2.0
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Designed and built with all the love in the world @twitter by @mdo and @fat.
 */

// CSS Reset
@import "reset.less";

// Core variables and mixins
@import "variables.less"; // Modify this for custom colors, font-sizes, etc
@import "mixins.less";

// Grid system and page structure
@import "scaffolding.less";
@import "grid.less";
@import "layouts.less";

// Base CSS
@import "type.less";
@import "code.less";
@import "forms.less";
@import "tables.less";

// Components: common
@import "sprites.less";
//@import "dropdowns.less";
//@import "wells.less";
@import "component-animations.less";
@import "close.less";

// Components: Buttons & Alerts
@import "buttons.less";
@import "button-groups.less";
@import "alerts.less"; 

// Components: Nav
//@import "navs.less";
//@import "navbar.less";
//@import "breadcrumbs.less";
@import "pagination.less";
@import "pager.less";

// Components: Popovers
@import "modals.less";
@import "tooltip.less";
@import "popovers.less";

// Components: Misc
//@import "thumbnails.less";
@import "labels-badges.less";
@import "progress-bars.less";
//@import "accordion.less";
//@import "carousel.less";
//@import "hero-unit.less";

// Utility classes
//@import "utilities.less"; // Has to be last to override when necessary

There are few other features, but i bet if you read till now you already grasp the power of LESS and the easy way WinLess compile it for us.
My last tip is to try a lot, use it, test it. Leave your old CSS practice behind and grasp the future!

LESS is easy to learn and easy to use.

2012/08/09

POSTED BY Jonathan Argentiero