Skip to content

Differences Between Less.js and Less4j

Jump to bottom Edit New page
SomMeri edited this page Sep 28, 2012 · 26 revisions

Variables

Last Declaration Win Strategy

Less.js uses last declaration wins strategy. Variable value is replaced by the last declared value withing the same scope - even if the declaration was written after variable usage.

Example Input:


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

.lazy-eval {
  width: @var;
}

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

Less.js output:

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

Less4j behaves differently. Variables in less4j behave the same way as in traditional language: we use the value of the last declaration written before variable usage.

Less.js output:

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

Behavior of Less.js variables is under discussion in less.js issue list, see https://github.com/cloudhead/less.js/issues/297 and https://github.com/cloudhead/less.js/issues/905 . It is possible that the behavior of less.js will change in the future. Once less.js closes these two issues, less4j will adjust its own implementation to match whatever they decide.

Lazy Loading

Less4j variables must be declared before being used. Less.js has no such requirement. Since this behavior is probably related to the previous point, we will adjust our implementation once two issues mentioned in the above sections close.

OK in Less.js, but wrong in less4j:

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

.lazy-eval {
  width: @var;
}

Expressions

Floats With Unit Identifier

Less.js does not support floats with unit identifier e.g., this is illegal: 0.4cm. Less4j supports such numbers.

Negative Floats Without Leading 0

Less.js adds leading 0 to negative floats, Less4j keeps the number as it was. Positive floats behave the same way in both compilers.

  • Input: 
    selector { property : -.3 .3; }
  • Less.js output:
    selector {
  property: -0.3 .3;
}
  • Less4j output:
    selector {
  property: -.3 .3;
}

Minus 0

Less.js removes unary '-' from 0, Less4j keeps it there.

Example:

  • Input: 
    selector { property : -0 -0% -0px; }
  • Less.js output:
    selector {
  property: 0 0% 0px;
}
  • Less4j output:
    selector {
  property: -0 -0% -0px;
}

Aspect-ratio in Media

Less.js does not support aspect-ratio in css3 media. Less4j accepts it.

Illegal in less.js but legal in Less4j:

@media (aspect-ratio: 59/80) {
  font-size: 3em;
}

Percentage as a Class Name

Less.js does not accept percentage as a class name. Less4j accepts it.

Illegal in less.js but legal in Less4j:

.12% {
  
}

!important Keyword

Less.js prints the !important keyword as it was in the input. E.g., if the input contained "! important", less.js prints it as "! important" . If the input contained "!important", less.js leaves it that way. Less.js also puts an empty space before the important keyword only if it was there in the input.

Less4j always puts a space before it and prints it as "!important".

Colors

If the input in contains a color name (red, blue, ...), then we place the color name into the output.

Less.js behavior is bit more complicated:

  • if the color name is followed by ;, then less.js preserves the name
  • if the color name is NOT followed by ;, then less.js translates color into the code.

Example:

  • Input: 
    li,p { background-color : lime }
li,p { background-color : lime; }
  • Less.js output:
    li,
p {
  background-color: #00ff00;
}
li,
p {
  background-color: lime;
}
  • Less4j output:
    li,
p {
  background-color: lime;
}
li,
p {
  background-color: lime;
}

Whitespaces

Whitespaces After Comments

If a comment is located inside an expression, Less4j always puts a space after it. Less.js puts it there only if original file had it.

Comments After Declarations

If the comment after ruleset is not preceded by an empty line, less.js does not put new line before it. We handle comments differently, a comment is preceded by a new line if it was preceded by it in the input.

  • Input with an empty line:
    p ~ * { background: lime; }
 
/* let's try some pseudos that are not valid CSS but are likely to
be implemented as extensions in some UAs. These should not be
recognised, as UAs implementing such extensions should use the
:-vnd-ident syntax. * /
  • Less4j & Less.js output::
    p ~ * {
  background: lime;
}
/* let's try some pseudos that are not valid CSS but are likely to
be implemented as extensions in some UAs. These should not be
recognised, as UAs implementing such extensions should use the
:-vnd-ident syntax. * /:
  • Input without the empty line:
    p ~ * { background: lime; }
/* let's try some pseudos that are not valid CSS but are likely to
be implemented as extensions in some UAs. These should not be
recognised, as UAs implementing such extensions should use the
:-vnd-ident syntax. * /
  • Less.js output:
    p ~ * {
  background: lime;
} /* let's try some pseudos that are not valid CSS but are likely to
be implemented as extensions in some UAs. These should not be
recognised, as UAs implementing such extensions should use the
:-vnd-ident syntax. * /:
  • Less4j output:
    p ~ * {
  background: lime;
}
/* let's try some pseudos that are not valid CSS but are likely to
be implemented as extensions in some UAs. These should not be
recognised, as UAs implementing such extensions should use the
:-vnd-ident syntax. * /:

Newlines After Comments

No matter how many new lines follow directly after the comment, less4j prints only one after that comment. Less.js will keep the original number of new lines.

Example:

  • Input: 
    /* A C-style comment */
 
padding: 2;
  • Less.js output: 
    /* A C-style comment */
 
padding: 2;
  • Our output: 
    /* A C-style comment */
padding: 2;

nth-xxxxx(an+b) Pseudo-classes

Less4j translates whitespaces inside the :nth-xxxxx(an+b) pseudo-classes differently than less.js. Less4j strips them out while less.js does not.

Example:

  • Input: 
    :nth-child( 3n + 1 )
:nth-child( +3n - 2 )
:nth-child( -n+ 6)
:nth-child( +6 )
:nth-child( -6 ) {
  padding: 2;
}
  • Less.js output: 
    :nth-child( 3n + 1 ):nth-child( +3n - 2 ):nth-child( -n+ 6):nth-child( +6 ):nth-child( -6 ) {
  padding: 2;
};
  • Our output: 
    :nth-child(3n+1) :nth-child(+3n-2) :nth-child(-n+6) :nth-child(+6) :nth-child(-6) {
  padding: 2;
}

Media Font Declaration

If the "serif" part of font declaration does not have a leading space, less.js will not give it one. For some weird reason, sans-serif works differently. Less4j always places a space after comma ",".

Example:

  • Input: 
    @media screen {
  p.test {font-family:verdana,sans-serif;font-size:14px;}
}
@media print {
  p.test {font-family:times, serif;font-size:10px;}
}
@media print {
  p.test {font-family:times,serif;font-size:10px;}
}
  • Less.js output: 
    @media screen {
  p.test {
    font-family: verdana, sans-serif;
    font-size: 14px;
  }
}
@media print {
  p.test {
    font-family: times, serif;
    font-size: 10px;
  }
}
@media print {
  p.test {
    font-family: times,serif;
    font-size: 10px;
  }
}
  • Les4j output: 
    @media screen {
  p.test {
    font-family: verdana, sans-serif;
    font-size: 14px;
  }
}
@media print {
  p.test {
    font-family: times, serif;
    font-size: 10px;
  }
}
@media print {
  p.test {
    font-family: times, serif;
    font-size: 10px;
  }
}

Whitespaces in Media Queries

Less.js keeps whitespaces in media and Less4j is not.

Example:

  • Input: 
    @media screen , screen {
  ...
}
@media media screen,print {
  ...
}
  • Less.js output: 
    @media screen , screen {
  ...
}
@media media screen,print {
  ...
}
  • Les4j output: 
    @media screen, screen {
  ...
}
@media media screen, print {
  ...
}
Add a custom footer
Add a custom sidebar

Clone this wiki locally