使用命名空间在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

你的问题详细

作为七相-MAX所描述的,存在与名称问题间隔"当&被附加到嵌套选择器".所以Bootstrap代码部分包含:

.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

以下应该有效:

1. 将LESS代码中的bootstrap正常编译到bootstrap.css文件中.这将把所有LESS解析为"正常"的bootstrap css代码,并且&无论在何处使用它都将按预期和期望运行.

2. 然后在你的名字间隔LESS文件,执行以下操作:

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

我们正在做的是导入已编译的bootstrap.css文件(它没有更多的&值,因为它已经完全编译),但是当我们导入它时,我们告诉LESS通过将(less)类型转换放入来将CSS视为LESS代码.所以现在,你的名字空间应该简单地附加到bootstrap.css文件中每个选择器的完整选择器字符串,你最终应该得到你想要的.