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         


        

Answer 1

Here's a patch that should do it for v2.0.3 of bootstrap and lessc 3.10.3:

--- a/bootstrap/less/mixins.less
+++ b/bootstrap/less/mixins.less
@@ -530,16 +530,16 @@
 // The Grid
 #grid {

-  .core (@gridColumnWidth, @gridGutterWidth) {
+  .core (@gridColumnWidth: @gridColumnWidth, @gridGutterWidth: @gutterColumnWidth) {

     .spanX (@index) when (@index > 0) {
-      (~".span@{index}") { .span(@index); }
+      .span@{index} { .span(@index); }
       .spanX(@index - 1);
     }
     .spanX (0) {}

     .offsetX (@index) when (@index > 0) {
-      (~".offset@{index}") { .offset(@index); }
+      .offset@{index} { .offset(@index); }
       .offsetX(@index - 1);
     }
     .offsetX (0) {}
@@ -576,7 +576,7 @@
   .fluid (@fluidGridColumnWidth, @fluidGridGutterWidth) {

     .spanX (@index) when (@index > 0) {
-      (~".span@{index}") { .span(@index); }
+      .span@{index} { .span(@index); }
       .spanX(@index - 1);
     }
     .spanX (0) {}
@@ -608,7 +608,7 @@
   .input(@gridColumnWidth, @gridGutterWidth) {

     .spanX (@index) when (@index > 0) {
-      (~"input.span@{index}, textarea.span@{index}, .uneditable-input.span@{index}") { .span(@index); }
+      input.span@{index}, textarea.span@{index}, .uneditable-input.span@{index} { .span(@index); }
       .spanX(@index - 1);
     }
     .spanX (0) {}

Answer 2

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 3

The first answer works, though it took me a while to know what to do with it. I haven't done this in like 7 years! So, here is a bit of an explanation of exactly what to do with the code:

1. Locate the bootstrap.less, and create a new file patch.less in the same directory with the patch code:

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

2. Then open the bootstrap.less, it will look something like this:

/*!
 * Bootstrap v2.3.2
 *
 * Copyright 2012 Twitter, Inc
 * Licensed under the Apache License v2.0
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Designed and built with all the love in the world @twitter by @mdo and @fat.
 */   
        

@import "bootstrap/variables.less"; // Modify this for custom colors, font-sizes, etca
@import "bootstrap/mixins.less";

// CSS Reset
@import "bootstrap/reset.less";
...

3. After the @import "bootstrap/mixins.less";, you can add the patch.less, so it will look like this:

@import "bootstrap/mixins.less";
@import "patch.less";

Answer 4

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 5

There's no need to edit the style.

Just npm install less@1.7.5 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.