Twitter bootstrap Less v2不编译Twitter'；s引导程序2.x

在编译Twitter的Bootstrap 2.3.2时。在少于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 }

---

如何修复此问题？

在

less/navbar.less

文件中：

替换：

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

与：

---

另请参见：

我通过创建在引导混合后加载的新混合，在不修改引导文件的情况下避免了错误：

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

---

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

不需要编辑样式

---

只需

npm安装less@1.7.5

并且您将拥有最新less v1的本地（在您所在的文件夹中）副本，如果您运行

node_modules/less/bin/lessc source.less output.css，它将正确编译引导v2.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) {}

第一个答案很有效，尽管我花了一段时间才知道该怎么做。我已经7年没这么做了！因此，这里有一点关于如何处理代码的解释：

找到
bootstrap.less
，并在与修补程序代码相同的目录中创建一个新文件
patch.less
：
然后打开
bootstrap.less
，它将如下所示：
/*！
*引导v2.3.2
*
*版权所有2012推特公司
*根据Apache许可证v2.0获得许可
* http://www.apache.org/licenses/LICENSE-2.0
*
*由@mdo和@fat设计和建造的@twitter拥有世界上所有的爱。
*/   
@导入“bootstrap/variables.less”；//为自定义颜色、字体大小等修改此选项
@导入“bootstrap/mixins.less”；
//CSS重置
@导入“bootstrap/reset.less”；
...

在
@import“bootstrap/mixins.less”之后
，您可以添加
补丁。less
，因此它将如下所示：

@导入“bootstrap/mixins.less”；
@导入“patch.less”；
我看到
.navbar static top.container，
位于“替换”部分，但不在“替换”部分。那是故意的吗？谢谢！它救了我一天！我更喜欢这个解决方案，因为在我的项目中，Bootstrap 2包含在CMS中，理论上，dist文件可能会被更新覆盖。您永远不应该更改外部LIB/包的源文件。这就是为什么你应该使用这个解决方案。很抱歉，我不明白为什么这个解决方案有效（但它实际上对我有效）。在我的理解中，在Bootstrap的1之后添加这个mixin不应该阻止Bootstrap的编译1失败，因为它以前发生过。除非我在编译更少的文件时遗漏了什么？不完全是。与BS2兼容的最后一个Less版本是
1.3.3
。请注意，除了脏网格代码之外，BS2还使用。@最多七个阶段，您确定吗？我刚刚下载了一个新的引导程序2.3.2和一个新的less 1.7.5。它编译引导程序时没有错误。我读了你链接的问题，两个软件包中的一个是否有其他更新使得这成为可能？啊，是的，我的错误，BS
v2.3.x
已经修复了这个问题。（由于问题是关于更少的v2，安装旧版本的技巧听起来并不是一个答案）。是的，问题是关于更少的v2，但是OP（以及任何登陆这里的人，就像我以前做的那样）需要解决的问题是编译代码。我认为这实际上是一个解决方案，如果您不需要使用更少的v2，因为您不需要更改一行代码。现实生活中的例子：我在更新旧代码时遇到了这个问题，在我的风格中使用了引导混合。被接受的解决方案对我的处境不利。另一个是，但我发现使用旧的编译器（最初用于项目的编译器）比添加代码更容易。我认为在某些情况下这是一个很好的解决方案。在这里仍然使用Bootstrap 2.3.2作为站点。降级至1.7.5以下后，汇编为罚款。简而言之：卸载
npm卸载-g less
，重新安装
npm安装-gless@1.7.5
。
--- 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) {}

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