Less v2 does not compile Twitter's Bootstrap 2.x

Question

When compiling Twitter's Bootstrap 2.3.2. with Less 2 i found to following error:

NameError: #grid > .core > .span is undefined in /home/bootstrap-2.3.2/less/navbar.less on line 199, column 3:
198 .navbar-fixed-bottom .container {
199   #grid > .core > .span(@gridColumns);
200 }

How can i fix this?

Answer 1

I was able to avoid the error without modifying Bootstrap files by creating a new mixin that loaded after the Bootstrap mixins:

#grid {     .core  {         .span(@gridColumns) {             width: (@gridColumnWidth * @gridColumns) + (@gridGutterWidth * (@gridColumns - 1));         }     } }; 

This was better for us as we avoid patching contrib packages.

Answer 2

In the less/navbar.less file:

Replace:

.navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container {   #grid > .core > .span(@gridColumns); } 

With:

.navbar-static-top .container,   .navbar-fixed-top .container, .navbar-fixed-bottom .container {  width: (@gridColumnWidth * @gridColumns) + (@gridGutterWidth * (@gridColumns - 1)); } 

See also: Overriding class definitions with Less

Answer 3

There's no need to edit the style.

Just npm install [email protected] and you will have a local (inside the folder you are in) copy of the latest less v1, which compiles bootstrap v2.3.2 correctly if you run node_modules/less/bin/lessc source.less output.css.