当我使用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;}
谢谢
解决方法
你的问题详细
正如描述的七阶段最大值,当&被附加到嵌套选择器时,存在名称间距的问题.所以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-info & {
border-top-color: #fff;
}
}
}
完整的嵌套结构是.namespace .caret在&替换,这就是为什么你看到选择器看起来像.btn-primary .namespace-bs .caret等.
四周工作少了1.4
以下应该有效：
>将LESS代码中的bootstrap正常编译到bootstrap.css文件中.这将解决所有LESS到“正常”bootstrap css代码,以及&无论在何处使用,都将按预期运行.
>然后在你的名字中间隔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文件中每个选择器的完整选择器字符串,你应该得到你想要的结果.
