Less v2 不编译 Twitter 的 Bootstrap 2.x答案

【问题标题】：Less v2 does not compile Twitter's Bootstrap 2.xLess v2 不编译 Twitter 的 Bootstrap 2.x
【发布时间】：2014-12-25 00:53:04
【问题描述】：

在编译 Twitter 的 Bootstrap 2.3.2 时。使用 Less 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 }

我该如何解决这个问题？

【问题讨论】：

标签： twitter-bootstrap less twitter-bootstrap-2

【解决方案1】：

通过创建一个在 Bootstrap mixin 之后加载的新 mixin，我能够在不修改 Bootstrap 文件的情况下避免错误：

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

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

【讨论】：

我更喜欢这个解决方案，因为在我的项目中 Bootstrap 2 包含在 CMS 中，并且 dist 文件理论上可以被更新覆盖。
您永远不应该更改外部库/包的源文件。这就是您应该使用此解决方案的原因。
很抱歉，但我不明白为什么这个解决方案有效（但它实际上对我有用）。在我的理解中，在 Bootstrap 之后添加这个 mixin 不应该阻止 Bootstrap 的编译失败，因为它之前发生过。除非我在编译较少文件的方式上遗漏了什么？

【解决方案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));
}

另请参阅：Overriding class definitions with Less

【讨论】：

我看到.navbar-static-top .container, 在“替换”部分，但不在“与”部分。是故意的吗？
谢谢！它为我节省了一天的时间！

【解决方案3】：

无需修改样式。

只需npm install less@1.7.5，您将拥有最新的less v1 的本地（在您所在的文件夹内）副本，如果您运行node_modules/less/bin/lessc source.less output.css，它将正确编译引导v2.3.2。

【讨论】：

不完全。最后一个与 BS2 兼容的 Less 版本是 1.3.3。请注意，除了脏网格代码，BS2 还使用outdated selector interpolation syntax。
@seven-phases-max 你确定吗？我刚刚下载了一个新的引导程序 2.3.2 和一个新的更少的 1.7.5。它编译引导程序没有错误。我阅读了您链接的问题，现在这两个软件包之一中是否还有其他更新可以实现这一点？
啊，是的，我的错，BS v2.3.x 已经解决了这个问题。（由于问题是关于 Less v2，安装旧版本的技巧听起来不像是一个答案）。
是的，问题是关于更少的 v2，但是 OP（以及像我以前那样登陆这里的人）需要解决的问题是编译代码。我认为这实际上是一个解决方案，如果您不需要需要使用较少的 v2，因为您不需要更改任何一行代码。现实生活中的例子：我在更新旧代码时遇到了这个问题，我在我的风格中使用了 bootstrap mixins。接受的解决方案不适合我的情况。另一个是，但我发现使用旧的编译器更容易，这是最初用于项目的编译器，而不是添加代码。我认为在某些情况下这是一个很好的解决方案。
这里的站点仍然使用 Bootstrap 2.3.2。降级到更少的 1.7.5 后编译良好。简而言之：卸载npm uninstall -g less，重新安装npm install -g less@1.7.5。

【解决方案4】：

这是一个适用于 v2.0.3 的 bootstrap 和 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) {}

【讨论】：

【解决方案5】：

第一个答案有效，虽然我花了一段时间才知道如何处理它。我已经7年没有这样做了！所以，这里有一些关于如何处理代码的解释：

找到bootstrap.less，在补丁码所在目录下新建文件patch.less：

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

然后打开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";
...

在@import "bootstrap/mixins.less";之后，你可以添加patch.less，所以它看起来像这样：


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

【讨论】：