Quirks

Expression Language aka Operations

Parentheses

Css uses two types of expressions separators: a space (' ') and a comma (','). Comma is not allowed to be inside a parentheses e.g., this something: (12 (13 + 10,-23)); throws compile exception.

However, space is allowed inside the parentheses and is treated the same way as a top level separator. If they contain the empty separator, the output will contain separator too. Parentheses influence the order of arithmetic operations, but the user should be careful about spaces inside them.

Sample input:

parentheses {
  something: (12 (13 + 10 -23));
}

Sample output:

parentheses {
  something: 12 23 -23;
}

Some more cases:

something: (12 + (13 + 10 -23)); //Compiles into 12
something: (12 * (13 + 5 -23)); //Compiles into NaN
something: (12 (13 + 5 -23) + 5);  //Compile error: Object doesn't support this property or method

Unary Operators

Only minus is allowed unary operator. Plus is not allowed.

correct {
  margin: 3;
}
wrong {
  margin: +3;
  something: 12 +(10-23);
}

Operations and Negative Numbers

Less.js adds four arithmetic operations into CSS: addition (+), subtaction (-), multiplication (*) and division (/). You can use spaces inside those expressions e.g., following two expressions are equivalent:

• 2 + 3 * 4
• 2 + 3 * 4.

This feature interacts with standard CSS in an unfortunate way. CSS declarations use spaces as a separator and they allow also negative values. Correct CSS:

something {
  margin: -1 -2 -3 -4;
}

Combination of spaces as separators, negative numbers and expressions causes spaces to be significant. Two expressions with the same numbers and operators may mean two different things. Declarations in following example differ only in spaces, but their meaning is different:

one {
  margin: 1 -2; //compiles into "margin: 1 -2;"
}
two {
  margin: 1 - 2; //compiles into "margin: -3;"
}

Space After Function

Space is not allowed between function name and parenthesis. This is NOT considered a function: width: increment (15); and is compiled into width: increment (15);. The space must be removed e.g., width: increment(15); compiles to width: 16;

Note: if they less.js would allow a space after the function name, the grammar would become ambiguous. The only way to differentiate between an identifier followed by expression and an function would be to keep a list of allowed functions and restrict those identifiers on anything except them.

TODO: maybe the last note does not belong to this page

Variables

Variables Redefinition

There are some discussions about how variables should behave when being redefined. See https://github.com/cloudhead/less.js/issues/297 and https://github.com/cloudhead/less.js/issues/905 issues in less.js project. Less.js currently behave differently than other less language compiler implementations - in less.js the last variable declaration within the same scope wins.

Sample input:

@var: @a;
@a: 100%;

.lazy-eval {
  width: @var;
}

@a: 50%;
.lazy-eval two {
  width: @var;
}

Compiles into:

.lazy-eval {
  width: 50%;
}
.lazy-eval two {
  width: 50%;
}

Triple Variables Indirection

Triple variables indirection does not work. E.g. this is NOT syntactically correct:

.variable-names {
    @var: 'hello';
    @almostthere: 'var';
    @name: 'almostthere';
    name1: @@almostthere;
    name: @@@name;
}

The last line throws the exception. On the other hand, this is OK:

.variable-names {
    @var: 'hello';
    @almostthere: 'var';
    @name: 'almostthere';
    name1: @@almostthere;
}

and compiles into:

.variable-names {
    name1: 'hello';
}

Order of Media Statements

Less.js reorders statements in @media. It prints declarations first and rulesets second. The last declaration does not have a new line, following ruleset starts at the same line.