test.less

/* CSS */

div {
  .class { color: blue; }
  color: blue;
}

.class {
  color: blue;
}

// The following cannot be mixin-defs, and are simply CSS selectors

div:hover {
  color: blue;
}

:hover {
  color: blue;
}

.class:hover {
  color: blue;
}

#id.class:hover {
  color: blue;
}

#id, .class, :hover {
  color: blue;
}

.class {
  #id, .class, :hover {
    color: blue;
  }
}

.inner {
  .class { color: blue; }
  div:hover { color: blue; } // FIXME, syntactically, div:hover = color:blue;
  div { color: blue; }
  #id { color: blue; }
  #id:hover { color: blue; }
}

.outer {
  .inner {
    div { color: blue; } 
    div:hover { color: blue; } // FIXME (see above)
    .class { color: blue; }
    #id { color: blue; }
    #id:hover {color: blue; }
  }
}

/* Variables */

@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;

#header { color: @light-blue; }

.variable-variables {
  @fnorf: "I am fnord.";
  @var: 'fnord';
  
  content: @@var;
}


/* Mixins */


.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

#menu a {
  color: #111;
  .bordered;
}


/* Parametric Mixins */


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

#header {
  .border-radius (4px);
}

.button {
  .border-radius (6px);
}

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

#header {
  .border-radius;  
}

.wrap () {
  text-wrap: wrap;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  word-wrap: break-word;
}

pre { .wrap }


/* The arguments variable */

.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {
  box-shadow: @arguments;
  -moz-box-shadow: @arguments;
  -webkit-box-shadow: @arguments;
}
.box-shadow(2px, 5px);


/* Nested Rules */


#header {
  color: black;

  .navigation {
    font-size: 12px;
  }
  
  .logo {
    width: 300px;
    &:hover { text-decoration: none }
  }
}

#header        { color: black;
  .navigation  { font-size: 12px; }
  .logo        { width: 300px;
    &:hover    { text-decoration: none }
  }
}


/* Operations */


.operations {
  @base: 5%;
  @filler: @base * 2;
  @other: @base + @filler;

  color: #888 / 4;
  background-color: @base-color + #111;
  height: 100% / 2 + @filler;

  @var: 1px + 5;

  width: (@var + 5) * 2;

  border: (@width *2) solid black;
}

.color-operations {
  @new1: lighten(@color, 10%);
  @new2: darken(@color, 10%);

  @new3: saturate(@color, 10%);
  @new4: desaturate(@color, 10%);

  @new5: fadein(@color, 10%);
  @new6: fadeout(@color, 10%);

  @new7: spin(@color, 10);
  @new8: spin(@color, -10);
}

.more-color-operations {
  @base: #f04615;
  
  .class {
    color: saturate(@base, 5%);
    background-color: lighten(spin(@base, 8), 25%);
  }
  
  @new1: hue(@color);
  @new2: saturation(@color);
  @new3: lightness(@color);
}

@new: hsl(hue(@old), 45%, 90%);


/* Namespaces & Accessors */


#bundle {
  .button () {
    display: block;
    border: 1px solid black;
    background-color: grey;
    &:hover { background-color: white }
  }
  .tab {
  	float: left;
  }
  .citation {
  	display: none;
  }
}

#header a {
  color: orange;
  #bundle > .button;
}

#defaults {
  @width: 960px;
  @color: black;
}

.article { color: #294366; }

.comment {
  width: #defaults[@width];
  color: .article['color']; 
}


/* Scope */


@var: red;

#page {
  @var: white;
  #header {
    color: @var; // white
  }
}

#footer {
  color: @var; // red  
}


/* Comments */


/* Hello, I'm a CSS-style comment */
.class { color: black }

// Hi, I'm a silent comment, I won't show up in your CSS
.class { color: white }


/* Importing */
@import "lib.less";
@import "lib";
@import "lib.css";


/* String Interpolation */

@base-url: "http://assets.fnord.com";
background-image: url("@{base-url}/images/bg.png");

/* Escaping */
.class {
  filter: ~"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png')";
}


/* Javascript Evaluation */


@var: `"hello".toUpperCase() + '!'`;

@str: "hello";
@var: ~`"@{str}".toUpperCase() + '!'`;

@height: `document.body.clientHeight`;