7

知道为什么在我使用 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 代码中的错误？

谢谢

4

2 回答 2

13

你的问题详细

如 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文件（其中没有更多&值，因为它已完全编译），但是当我们导入它时，我们通过将类型转换放入来告诉 LESS 将 CSS 视为 LESS 代码(less)。所以现在，您的名称空间应该简单地将自己附加到bootstrap.css文件中每个选择器的完整选择器字符串中，并且您应该最终得到您想要的。

于 2013-11-05T19:16:33.407 回答
1

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

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

于 2013-11-05T17:39:36.637 回答