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