Less v2无法编译Twitter的Bootstrap 2.x。

Question

当使用Less 2编译Twitter的Bootstrap 2.3.2时，我发现了以下错误：

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 }

我该如何修复这个问题？

- Bass Jobsen

Answer 1

我能够避免修改Bootstrap文件而避免错误，方法是创建一个新的mixin，它会在Bootstrap mixin之后加载：

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

这对我们来说更好，因为我们避免了修补contrib包。

- Marc Robichaud

---

我更喜欢这个解决方案，因为在我的项目中，Bootstrap 2已经包含在CMS中，dist文件理论上可以被更新覆盖。 - piotr_cz

你绝不能更改外部库/包的源文件。这就是为什么你应该使用这个解决方案的原因。 - bjorkblom

对不起，我不明白为什么这个解决方案有效（但它确实对我有效）。在我看来，在引入 Bootstrap 的 mixin 后再添加此 mixin 不应该防止 Bootstrap 的编译失败，因为它是在 Bootstrap 编译之前发生的。除非我对 less 文件的编译方式有所遗漏？ - PoC

Answer 2

在less/navbar.less文件中：

替换为：

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

随着:

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

另请参阅：使用Less覆盖类定义

- Bass Jobsen

---

我看到 .navbar-static-top .container, 在“替换”部分，但不在“替换为”部分。这是有意为之吗？ - Adam Taylor

谢谢！这节省了我一天的时间！ - Davuz

Answer 3

无需编辑样式。

只需执行npm install less@1.7.5，就可以在本地（所在文件夹内）获得最新的less v1版本，如果运行node_modules/less/bin/lessc source.less output.css，则可以正确编译bootstrap v2.3.2。

- Piero Nicolli

---

不完全正确。与BS2兼容的最后一个Less版本是1.3.3。请注意，除了脏网格代码之外，BS2还使用过时的选择器插值语法。 - seven-phases-max

@seven-phases-max 你确定吗？我刚刚下载了最新的bootstrap 2.3.2和less 1.7.5，编译bootstrap时没有出现任何错误。我看了你提供的链接中的问题，也许这两个软件包中有其他更新使得这种情况成为可能了吗？ - Piero Nicolli

啊，是的，我的错误，BS v2.3.x 已经修复了这个问题。 （但由于问题涉及Less v2，安装旧版本的技巧似乎不像一个答案）。 - seven-phases-max

是的，问题是关于less v2的，但是原帖（以及其他人，比如我之前）需要解决的问题是编译代码。我认为这实际上是一个解决方案，如果你不需要使用less v2，因为你不需要改变一行代码。现实生活中的例子：我在更新旧代码时遇到了这个问题，在我的样式中使用了bootstrap mixins。被接受的解决方案对我的情况不好。另一个解决方案很好，但我发现使用旧编译器更容易，这是最初用于该项目的编译器，而不是添加代码。我认为在某些情况下这是一个好的解决方案。 - Piero Nicolli

在这个网站上仍然使用Bootstrap 2.3.2。降级到less 1.7.5后，编译正常。简而言之：卸载 npm uninstall -g less，重新安装 npm install -g less@1.7.5。 - Fabien Snauwaert

那种解决方案的问题在于它回避了问题。在大多数情况下，这个问题出现是因为演员试图升级较少的内容，但由于向后兼容性的原因，他们还不能升级引导程序。 - DylanYoung

Answer 4

第一个答案可行，但我花了一段时间才知道该怎么做。我已经有7年没做过这个了！所以，这里有一个关于如何处理代码的详细说明：

1. 找到 bootstrap.less 文件，并在同一目录下创建一个名为 patch.less 的新文件，其中包含补丁代码：

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

2. 然后打开 bootstrap.less，它会看起来像这样：

/*!
 * 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. 在 @import "bootstrap/mixins.less"; 之后，您可以添加 patch.less，代码如下：

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

- toto_tico

Answer 5

这是一个针对Bootstrap v2.0.3和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