Css 使用命名空间在Bootstrap 3中编译问题

当我使用Crunch/WinLESS编译bootstrap3时，你知道为什么会有某些样式被破坏吗。我正在使用这段代码来命名引导

.namespace-bs {
    @import "less/bootstrap.less";
}

对于大多数样式，它都非常有效，但也有一些是这样的：

.btn-primary .namespace-bs .caret,.btn-success .namespace-bs .caret,.btn-warning .namespace-bs .caret,.btn-danger .namespace-bs .caret,.btn-info .namespace-bs .caret{border-top-color:#fff;}

.namespace-bs .btn-primary .caret,.namespace-bs .btn-success .caret,.namespace-bs .btn-warning .caret,.namespace-bs .btn-danger .caret,.namespace-bs .btn-info .caret{border-top-color:#fff;}

当我期望他们是这样的时候：

.btn-primary .namespace-bs .caret,.btn-success .namespace-bs .caret,.btn-warning .namespace-bs .caret,.btn-danger .namespace-bs .caret,.btn-info .namespace-bs .caret{border-top-color:#fff;}

.namespace-bs .btn-primary .caret,.namespace-bs .btn-success .caret,.namespace-bs .btn-warning .caret,.namespace-bs .btn-danger .caret,.namespace-bs .btn-info .caret{border-top-color:#fff;}

我的编译器是否有问题，或者LESS代码中是否存在错误

---

谢谢

不，编译器和代码都没有问题。这只是“引导程序不应该以这种方式使用”。将一个更少的文件放入名称空间是一个明智的想法，但它与使用所谓或类似技巧的选择器的库不兼容（即当

&

附加到嵌套选择器时）

（已更新）有关更多详细信息，请参阅和此处引用的其他问题。

您的问题的详细信息 正如max所描述的那样，“当

&

附加到嵌套选择器时”存在名称间距问题。因此引导程序代码的一部分有以下内容：

.caret {
  .btn-default & {
    border-top-color: @btn-default-color;
  }
  .btn-primary &,
  .btn-success &,
  .btn-warning &,
  .btn-danger &,
  .btn-info & {
    border-top-color: #fff;
  }
}

回想一下，

&

的每个实例都被完整的嵌套结构替换，因此，当您按原样命名它时，您实际上有以下内容：

.namespace-bs {
  .caret {
    .btn-default & {
      border-top-color: @btn-default-color;
    }
    .btn-primary &,
    .btn-success &,
    .btn-warning &,
    .btn-danger &,
    .btn-info & {
      border-top-color: #fff;
    }
  }
}

完整的嵌套结构是

.namespace.caret

在

&

替换点，这就是为什么您看到选择器看起来像

.btn primary.namespace bs.caret

等

以低于1.4%的价格工作+ 以下方面应起作用：

将引导程序从其较少的代码编译为

bootstrap.css

文件。这将把所有的LESS解析为“正常”引导css代码，

&

将在任何地方按预期和所需运行

然后在名称间距较小的文件中，执行以下操作：

。命名空间bs{
@导入（减去）“css/bootstrap.css”；
}

---

我们正在做的是导入已编译的

bootstrap.css

文件（在完全编译时，该文件中没有更多的

&

值），但在导入时。因此，现在，您的名称空间只需将其自身附加到

bootstrap.css

文件中每个选择器的完整选择器字符串中，就可以得到您想要的结果。

如果您提到您正在编辑的第一行的位置，这将非常有助于其他人，我不仅帮助您不确定我是否理解您的要求，而且如果您指的是.namespace bs{@import“less/bootstrap.less”}的位置，那么我创建了一个新的.less文件，其中只包含该行代码。不过，在版本3中，这个问题似乎已得到解决。2@Svakinn不，没有修好。v3.2可能会修复特定的

.btn

情况，但如果将“bootstrap.less”包装到名称空间中，则会破坏许多其他类和样式。事实上，如果当前状态为Less和Bootstrap，而不进行一些（相当大的）重构，则无法修复这一问题。请参阅此处引用的其他问题。@Svakinn换句话说，

@import（less）“css/bootstrap.css”解决方案是目前唯一的解决方案（并且在一段时间内将是唯一的解决方案）。是的@seven Phase max你是绝对正确的。相信3.2解决了这个问题是因为我犯了愚蠢的错误。感谢您的更正。仅供参考-在执行步骤1时，除非没有缩小步骤1中的CSS，否则我的编译器不会与步骤2一起工作。