Question

编译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 }

我该如何解决这个问题？

Answer 1

我可以通过创建一个在Bootstrap mixins之后加载的新mixin来避免错误而不修改Bootstrap文件：

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

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

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

另请参阅：Overriding class definitions with Less

Answer 3

无需编辑样式。

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

Answer 4

以下是一个补丁程序，应针对bootstrap和lessc 3.10.3的v2.0.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) {}

Answer 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";

Less v2不能编译Twitter的Bootstrap 2.x.

5 个答案: