具有名称空间的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。

为LESS 1.4+解决

以下应该工作：

1. 将引导程序正常地从其LESS代码编译为bootstrap.css文件。这会将所有LESS解析为“常规”引导CSS代码，并且&无论使用什么地方，will都将按预期和期望的方式运行。

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

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

我们正在执行的操作是导入已编译的bootstrap.css文件（由于已&完全编译，因此其中没有更多值），但是在导入文件时，我们要告诉LESS通过将(less)类型转换放入来将CSS视为LESS代码。因此，现在，您的名称空间应简单地将其自身附加到bootstrap.css文件中每个选择器的完整选择器字符串上，并最终获得所需的结果。