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

问题

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?

回答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.

回答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

回答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.

回答4:

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

来源：https://stackoverflow.com/questions/26628309/less-v2-does-not-compile-twitters-bootstrap-2-x