The dynamic stylesheet language.(less css)

Client-side usage

Link your .less stylesheets with the rel set to “stylesheet/less”:
"stylesheet/less" type="text/css" href="styles.less">
Then download less.js from http://lesscss.googlecode.com/files/less-1.2.1.min.js, and include it in the element of your page, like so:
Make sure you include your stylesheets before the script.

 

Variables

Variables allow you to specify widely used values in a single place, and then re-use them throughout the style sheet, making global changes as easy as changing one line of code.
// LESS

@color: #4D926F;

#header {
  color: @color;
}
h2 {
  color: @color;
}
 

Mixins

Mixins allow you to embed all the properties of a class into another class by simply including the class name as one of its properties. It’s just like variables, but for whole classes. Mixins can also behave like functions, and take arguments, as seen in the example bellow.


// LESS

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

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

Nested Rules

Rather than constructing long selector names to specify inheritance, in Less you can simply nest selectors inside other selectors. This makes inheritance clear and style sheets shorter.
// LESS

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

Functions & Operations

Are some elements in your style sheet proportional to other elements? Operations let you add, subtract, divide and multiply property values and colors, giving you the power to create complex relationships between properties. Functions map one-to-one with JavaScript code, allowing you to manipulate values however you want.
// LESS

@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%);
}
 

Watch mode

Watch mode is a client-side feature which enables your styles to refresh automatically as they are changed.
To enable it, append ‘#!watch’ to the browser URL, then refresh the page. Alternatively, you can run less.watch() from the console.

Examples:
/*Border Radius Functions*/
.border_radius(@radius: 10px)
{
    .border_radius(@radius, @radius);
}
.border_radius(@radius_top, @radius_bottom)
{
    .border_radius(@radius_top, @radius_top, @radius_bottom, @radius_bottom);
}
.border_radius(@radius_top_left, @radius_top_right, @radius_bottom_right, @radius_bottom_left)
{
    -webkit-border-radius:@radius_top_left @radius_top_right @radius_bottom_right @radius_bottom_left;
    -moz-border-radius:@radius_top_left @radius_top_right @radius_bottom_right @radius_bottom_left;
    border-radius:@radius_top_left @radius_top_right @radius_bottom_right @radius_bottom_left;
}
/*Shadows*/
.box_shadow(@shadow_x:3px, @shadow_y:3px, @shadow_rad:3px, @shadow_color:#888)
{
    box-shadow: @shadow_x @shadow_y @shadow_rad @shadow_color;
    -webkit-box-shadow:@shadow_x @shadow_y @shadow_rad @shadow_color;
    -moz-box-shadow:@shadow_x @shadow_y @shadow_rad @shadow_color;
}
.text_shadow(@shadow_color:#fff)
{
    text-shadow:0 1px 0 @shadow_col;
}
.opacity(@op:100)
{
    filter:alpha(opacity=@op);
    -moz-opacity:@op/100;
    -khtml-opacity:@op/100;
    opacity:@op/100;
}
.background_gradient(@from:#000, @to:#EEE)
{
    background: @from;
    background-image: -webkit-gradient(linear, left top, left bottom, from(@from), to(@to));
    background-image: -moz-linear-gradient(top, @from, @to);
    filter: formatstring("progid:DXImageTransform.Microsoft.gradient(startColorstr='{0}', endColorstr='{1}')", @from, @to); /* IE6,IE7 */
    -ms-filter: formatstring("\"progid:DXImageTransform.Microsoft.gradient(startColorStr='{0}', EndColorStr='{1}')\"", @from, @to); /* IE8 */
}
.transition(@range: all, @time: 1s, @ease: ease-in-out)
{
    -moz-transition: @range @time @ease;
    -webkit-transition: @range @time @ease;
    -o-transition: @range @time @ease;
    transition: @range @time @ease;
}
/*Transformations*/
.skew(@angle_x:35, @angle_y:0)
{
    -webkit-transform: skew(formatstring("{0}deg", @angle_x), formatstring("{0}deg", @angle_y));
    -moz-transform: skew(formatstring("{0}deg", @angle_x), formatstring("{0}deg", @angle_y));
    -o-transform: skew(formatstring("{0}deg", @angle_x), formatstring("{0}deg", @angle_y));
    -ms-transform: skew(formatstring("{0}deg", @angle_x), formatstring("{0}deg", @angle_y));
    transform: skew(formatstring("{0}deg", @angle_x), formatstring("{0}deg", @angle_y));
}
.scale(@scale_x: 1)
{
    -webkit-transform: scale(@scale_x);
    -moz-transform: scale(@scale_x);
    -o-transform: scale(@scale_x);
    -ms-transform: scale(@scale_x);
    transform: scale(@scale_x);
}
.rotate(@deg:35)
{
    -webkit-transform: rotate(formatstring("{0}deg", @deg));
    -moz-transform: rotate(formatstring("{0}deg", @deg));
    -o-transform: rotate(formatstring("{0}deg", @deg));
    -ms-transform: rotate(formatstring("{0}deg", @deg));
    transform: rotate(formatstring("{0}deg", @deg));
}
.translate(@move_x: 10px, @move_y: 10px)
{
    -webkit-transform: translate(@move_x, @move_y);
    -moz-transform: translate(@move_x, @move_y);
    -o-transform: translate(@move_x, @move_y);
    -ms-transform:translate(@move_x, @move_y);
    transform: translate(@move_x, @move_y);
}
#example1
{
    .border_radius(5px);
    .box_shadow;
    background-color: #eee;
    padding: 20px;
}