34

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?

cvrebert
  • 8,264
  • 2
  • 33
  • 47
Bass Jobsen
  • 47,890
  • 16
  • 139
  • 218

5 Answers5

60

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.

Marc Robichaud
  • 665
  • 5
  • 8
  • 1
    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. – piotr_cz May 15 '15 at 08:11
  • 2
    You should never ever change the source files of external libs/packages. That's why you should use this solution. – bjorkblom Jun 11 '15 at 12:46
  • 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? – PoC Apr 23 '19 at 16:44
42

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

Community
  • 1
  • 1
Bass Jobsen
  • 47,890
  • 16
  • 139
  • 218
3

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.

Piero Nicolli
  • 176
  • 1
  • 5
  • 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](http://stackoverflow.com/questions/19553367). – seven-phases-max Oct 22 '15 at 12:09
  • @seven-phases-max 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? – Piero Nicolli Oct 24 '15 at 11:19
  • 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). – seven-phases-max Oct 24 '15 at 16:01
  • 1
    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. – Piero Nicolli Oct 25 '15 at 23:11
  • 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 less@1.7.5`. – Fabien Snauwaert Aug 25 '17 at 11:08
  • 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). – DylanYoung Mar 09 '20 at 18:46
0

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) {}
DylanYoung
  • 1,835
  • 22
  • 27
0

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));
        }
    }
};
  1. 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";
...
  1. 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";
toto_tico
  • 13,917
  • 7
  • 74
  • 93