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

Question

知道为什么在我使用 Crunch / WinLESS 编译 Bootstrap 3 时某些样式会中断。我正在使用此代码来命名引导程序。

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

我的编译器有问题还是 LESS 代码中的错误？

谢谢

Answer 1

不，编译器或您的代码都没有问题。这只是“引导程序不应该以这种方式使用”。将一个完整的文件放入命名空间是一个明智的想法，但它与具有使用所谓的"Parent-Selectors" 或类似技巧的选择器的库不兼容（即当& 附加 到嵌套选择器时）。

（已更新）有关详细信息，请参阅#2052 和从那里引用的其他问题。

Answer 2

您的问题详情

正如 7-phases-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 等。

为 LESS 1.4+ 解决问题

以下应该有效：

1. 照常将引导程序从其 LESS 代码编译到 bootstrap.css 文件中。这会将所有 LESS 解析为“正常”引导 css 代码，并且& 将在任何使用它的地方按预期和期望运行。

2. 然后在您的名称间距 LESS 文件中，执行以下操作：

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

我们正在做的是导入已编译的bootstrap.css 文件（其中没有更多的& 值，因为它已完全编译），但是当我们导入它时，we are telling LESS to treat the CSS as LESS code by putting the (less) type casting in。所以现在，您的名称空间应该简单地将自己附加到 bootstrap.css 文件中每个选择器的完整选择器字符串中，并且您应该得到您想要的结果。