About

Less (sometimes stylized as LESS) is a dynamic style sheet language that can be compiled into Cascading Style Sheets (CSS) and run on the client side or server side.[2] Designed by Alexis Sellier, Less is influenced by Sass and has influenced the newer "SCSS" syntax of Sass, which adapted its CSS-like block formatting syntax.[3] Less is open source. Its first version was written in Ruby; however, in the later versions, use of Ruby has been deprecated and replaced by JavaScript.

Who use?

Less provides the following mechanisms

variables
nesting
mixins
operators
functions

Getting Started

Less runs inside Node, in the browser and inside Rhino. There are also many 3rd party tools that allow you to compile your files and watch for changes.

Client-side Usage

Less runs inside Node

1. To start off, link your .less stylesheets with the rel attribute set to "stylesheet/less":

2. Next, download less.js and include it in a <script> </script> tag in the <head> element of your page:

1 The easiest way to install Less on the server, is via npm, the node.js package manager, as so:

$ npm i -g less

2 Usage in Code

VARIABLES

Less allows variables to be defined. Variables in Less are defined with an at sign (@). Variable assignment is done with a colon (:).

http://jsfiddle.net/rovenskyi/ggqj1jja/3/

// Variables
@link-color:        #7edd8d;
@link-color-hover:  darken(@link-color, 10%);
@def-color-bg:      #468fb1;

body {
  background: @def-color-bg;
}

a {
  color: @link-color;
    
    &:hover {
         color: @link-color-hover;
    }
}

NESTING

Less gives you the ability to use nesting instead of, or in combination with cascading.

http://jsfiddle.net/rovenskyi/ggqj1jja/12/

header h1 {
    font-size: 26px;
    font-weight: bold;
}

header p {
    font-size: 16px;
}

header p a {
    text-decoration: none;
}

header p a:hover {
    border-width: 1px;
    color:white;
}

.header {
  h1 {
    font-size: 26px;
    font-weight: bold;
  }
  p { 
    font-size: 16px;
    a { 
      text-decoration: none;
      &:hover { 
        border-width: 1px;
        color:white;
      }
    }
  }
}

Let's say we have the following CSS:

MIXINS

"mix-in" properties from existing styles

You can mix-in class selectors and id selectors, e.g.

http://jsfiddle.net/rovenskyi/ggqj1jja/5/

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

#header, #header-2 {
    border: 3px solid @def-color-bg;   
}

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

MIXINS

@btn-color-green:      #fff; 
@btn-bg-green:         #7edd8d; 
@btn-hover-green:      darken(@btn-bg-green, 15%);  
@btn-border-green:     @btn-bg-green;

.button-color(@color; @background; @hover; @border;) {
    color: @color;
    background-color: @background;
    border-color: @border;

    a {
        color: @color;

        &:hover {
            text-decoration: none;
            outline: none;
            color: @color;
        }

        &:active, &:focus {
            background: none;
            color: @color;
        }
    }

    &:hover {
        color: @color;
        background-color: @hover;
        border-color: @hover;
        outline: none;
    }
}

.btn-green {
    .button-color(@btn-color-green; @btn-bg-green; @btn-hover-green; @btn-border-green);
}

http://jsfiddle.net/rovenskyi/ggqj1jja/6/

OPERATORS

@the-border:   1px;
@base:         #f04615;
@base-color:   #111;
@red:          #842210;
@border-color: grey;
@border-type:  solid;

#header, #header-2 {
    border: @the-border @border-type @border-color;    
}

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

#header-3 { 
  color: @base-color + #003300;
  border-color: desaturate(@red, 0%);
  background-color: spin(lighten(@base, 25%), 8);
}

http://jsfiddle.net/rovenskyi/ggqj1jja/7/

Any number, color or variable can be operated on. Here are a couple of examples:

FUNCTIONS

@the-border:   1px;
@base:         #f04615;
@base-color:   #111;
@red:          #842210;
@border-color: grey;
@border-type:  solid;

#header, #header-2 {
    border: @the-border @border-type @border-color;    
}

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

#header-3 { 
  color: @base-color + #003300;
  border-color: desaturate(@red, 0%);
  background-color: spin(lighten(@base, 25%), 8);
}

http://jsfiddle.net/rovenskyi/ggqj1jja/7/

Less allows operations and functions. Operations allow addition, subtraction, division and multiplication of property values and colors, which can be used to create complex relationships between properties. Functions map one-to-one with JavaScript code, allowing manipulation of values

Comments

/*
    One hell of a block
    style comment!
*/
@color-red: red;

// Get in line
@color-white: white;

Both block-style and inline comments may be used:

TOTAL

Less are CSS preprocessors, which allow writing clean CSS in a programming construct instead of static rules

LESS

More from Oleg Rovenskyi