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?

Recession

Answer 1

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

Recession

I see that .navbar-static-top .container, is in the "Replace" section but not the "With" section. Was that on purpose? – Gd

Thank you! It saves me a day! – Viable

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.

Pinkney

I prefer this solution as in my project Bootstrap 2 is included in the CMS and dist files could theoretically be overwritten with the update. – Lempres

You should never ever change the source files of external libs/packages. That's why you should use this solution. – Consignor

I'm sorry but I don't understand why this solution work (yet it actually worked for me). In my understanding, adding this mixin after Bootstrap's one should not prevent Bootstrap's compilation one from failing since it happens before. Unless I'm missing something in the way less files are compiled? – Livvy

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.

Catheycathi

Not quite. The last Less version that is compatible with BS2 is 1.3.3. Note that beside the dirty grid code, BS2 also uses outdated selector interpolation syntax. – Shelving

@Shelving Are you sure? I downloaded just now a fresh bootstrap 2.3.2 and a fresh less 1.7.5. It compiled bootstrap with no errors. I read the question you linked, are there maybe other updates in one of the two packages that now make this possible? – Catheycathi

Ah, yes, my mistake, BS v2.3.x has this fixed already. (Still since the question is about Less v2, the trick of installing older version does not sounds like an answer). – Shelving

Yes, the question is about less v2, but the problem the OP (and whoever lands here, like I did before) needs to solve is compiling the code. I think this is actually a solution, if you don't need to use less v2, since you don't change a single line of code. Real life example: I had this problem while updating old code, where I used bootstrap mixins in my style. The accepted solution wasn't good for my situation. The other one was, but I found easier to use an older compiler, which was the one originally used for the project, instead of adding code. I think it's a good solution in some cases. – Catheycathi

Still using Bootstrap 2.3.2 for a site here. Compiled fine after downgrading to less 1.7.5. In short: uninstall npm uninstall -g less, reinstall npm install -g [email protected]. – Carmella

The problem with that solution is that it avoids the problem. In most cases, this issue is coming up because the actor is trying to upgrade less and can't yet upgrade bootsrap (due to back-compat concerns most likely). – Intervalometer

Answer 4

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";

Unexpressed

Answer 5

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) {}

Intervalometer