Less Language Other Compiler Features

Top Level Sorting and Removal

According to css specification, style sheet can have only one @charset declaration. In addition, css elements must be in following order:

• @charset statement,
• @import statements,
• anything else.

Compiler enforce there rules by sorting top level declarations and removing all unnecessary @charset declarations.

Duplicate Declarations Detection

If the ruleset contains the same declaration twice, only the last one is printed.

Sample input:

.numbers {
  padding: 2; // this line will disappear - it is the same as the next one
  padding: 2;
  padding: 3; // this line will disappear - it is the same as the last one
  padding: 2+3; // this line will disappear - it is the same as the next one
  padding: 5;
  padding: ~"3"
}

compiles into:

.numbers {
  padding: 2;
  padding: 5;
  padding: 3;
}

Two declarations are considered equal if they would result in exactly the same line. Two lines differing only by comments are considered different. Compilation will keep this unchanged:

.numbers {
  padding: /* comment */ 2; 
  padding: /* different */ 2;
}

Cycle Detection For Variables

As variable can reference any variable accessible in its scope, it is possible to create variable cycles:

// variables cycle
@first: @second;
@second: @first + 1;
.ruleset {
  padding: @second;
}

Variables @first and @second references each other and it is impossible to evaluate their value. Less4j detects such cycles and reports them as errors:

ERROR 5:16 Cyclic references among variables: @second (5:16) -> @first (3:14) -> @second (2:13) 

Cycle Detection For Mixins

Since full cycle detection is not possible, mixins cycle detection is very limited. Mixins cycles are detected only in case of ruleset that is trying to call itself:

.ruleset() {
  property: value;
}
.ruleset {
  .ruleset();
}

All mixin calls from inside the ruleset ignore that ruleset. The above less is compiled into:

.ruleset {
  property: value;
}

Source Maps

Source map support is described on another page.

Output Compression

Less4j supports simple css compression. It removes all comments, indentation, new lines and other unnecessary whitespaces. It does not utilizes all possible css compression tricks, so we recommend to use dedicated css compression if the output size matters a lot.

Unknown Directive Support

Less4j is strict compiler and reports errors for unknown/unexpected constructions. The only exceptions are unknown at-rules. Unknown at-rule is allowed to have comma separated list of css values and a body. At-rule without body must end with semicolon.

Unknown at-rules examples:

@with-values-list some, 'value'; // must end with semicolon
@with-body { 
  h1 { color: red; }
}
@with-value-and-body value {
  color: white;
}

Less4j issues warnings on all encountered unknown at-rules: Unknown at-rule, resulting css may be incorrect. Unknown at-rules support in less.js is undocumented and may be changed in the future (altrough it is unlikely). If that happen, less4j implementation will change too.