Language Reference

The language

Variables

These are pretty self-explanatory:

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

#header {
  color: @light-blue;
}

Outputs:

#header {
  color: #6c94be;
}

Note that variables are actually ‘constants’ in that they can only be defined once.

Mixins

Mixins are a way of including (‘mixing in’) a bunch of properties from one rule-set into another rule-set. So say we have the following mixin:

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

And we want to use these properties inside other rule-sets. We just have to specify the name of the mixin where we want the properties to go, passing any parameters, like so:

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

.post a {
  color: red;
  .rounded_corners(10px);
}

#menu a will now have rounded corners with a 5px radius and .post a with a 10px radius.

You can also use normal classes like a mixin with no arguments just by using its name (as in #menu a above)

Nested Rules

.LESS gives you the ability to use nesting instead of, or in combination with cascading. Lets say we have the following CSS:

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

In .LESS, we can also write it this way:

#header {
  color: black;

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

The resulting code is more concise, and mimics the structure of your html.

Operators

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

@base: 5%;
@filler: @base * 2;
@other: @base + @filler;

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

The output is pretty much what you expect — .LESS understands the difference between colors and units. If a unit is used in an operation, like in:

@var: 1px + 5;

.LESS will use that unit for the final output — 6px in this case.

Functions

.LESS defines some useful functions which are called using the normal CSS function syntax

#main {
  color: hsl(0, 100%, 50%)
}

Is compiled to

#main {
  color: #ff0000;
}

See the function reference for a full list of available functions.

Namespaces

Sometimes, you may want to group your variables or mixins, for organizational purposes, or just to offer some encapsulation. You can do this pretty intuitively in .LESS—say you want to bundle some mixins and variables under #bundle, for later re-use, or for distributing:

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

Now if we want to mixin the .button class in our #header a, we can do:

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

Scope

Scope in .LESS is very similar to that of programming languages. Variables and mixins are first looked for locally, and if they aren’t found, the compiler will look in the parent scope, and so on. Note that the order of declaration does matter.

@var: red;

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

Comments

Both block and inline comments are authorized:

#error {
  /* One hell of a comment */
  color: red;

  // Get in line!
  background: white;
}

Inline comments are removed from the output css and by default block comments are kept. So the above would output:

#error {
  /* One hell of a comment */
  color: red;
  background: white;
}

Importing

Importing works pretty much as expected. You can import a .less file, and all the variables in it will be available. If the file is a .less the extension is optional:

@import "library";
@import "import.less";
@import "typo.css";

If the file is a .css however, the @import statement will not import the contents of the file. It will instead leave the @import statment in the output. This is so the browser can cache the contents of your static css files.