您真正想要的是在LESS和SASS术语中_扩展的_ 东西。例如,您需要一个HTML元素(仅作为示例)…
<div class="myclass"></div>
......以 充分 行为,如果它有一个span3
从添加到它引导类,但实际上不添加该类的HTML。这可以在LESS 1.4.0中使用来完成:extend()
,但仍然不容易,主要是因为动态类引导的生成不会被拾取:extend()
。
这是一个例子。假定此初始LESS代码( .span3
引导程序那样动态生成的类):
.span3 {
width: 150px;
}
.someClass .span3 {
font-size: 12px;
}
.someOtherClass.span3 {
background: blue;
}
.myclass {
&:extend(.span3);
}
产生此CSS的代码:
.span3,
.myclass {
width: 150px;
}
.someClass .span3 {
font-size: 12px;
}
.someOtherClass.span3 {
background: blue;
}
它 没有 自动扩展的其他实例.span3
。这与SASS不同,但这仅意味着您需要在扩展方面更加明确。这样的好处是避免了过多的CSS代码膨胀。
要完全扩展,只需在中添加all
关键字extend()
(由于我不知道该all
选项,因此它是从我的原始代码更新的):
.myclass {
&:extend(.span3 all);
}
产生此结果:
.span3,
.myclass {
width: 150px;
}
.someClass .span3,
.someClass .myclass {
font-size: 12px;
}
.someOtherClass.span3,
.someOtherClass.myclass {
background: blue;
}
这使您.myclass
于.span3
该类(在我的示例中)。但是,对于您的情况,这意味着您需要重新定义引导程序的所有动态类,使其成为非动态的。像这样:
.span3 {
.span(3);
}
这样便:extend(.span3)
可以找到要扩展的硬编码类。对于任何用于动态.span@{index}
添加的选择器字符串,都需要这样做.span3
。
好的,我相信我发现了您的问题。首先,bootstrap定义了文件中的.spanX
一系列类mixins.less
,因此显然您需要确保将其包含在bootstrap负载中。但是,我想假设您已经包含了这些内容。
主要问题是引导程序如何通过循环中的动态类名立即生成那些引导程序。这是定义.spanX
系列的循环:
.spanX (@index) when (@index > 0) {
.span@{index} { .span(@index); }
.spanX(@index - 1);
}
.spanX (0) {}
当前, 由于类名称本身是动态生成的 ,因此不能用作混合名称。我不知道这是Bug还是LESS的局限性,但我确实知道,在撰写本文时,任何动态生成的类名称都不能用作混合名称。因此,.span3
可能在CSS代码中将其作为类放入HTML中,但出于混合目的而不能直接访问。
但是,由于他们如何构造代码,您仍然可以获得所需的东西,因为如您在循环代码中的上面所看到的那样,它们使用真正的mixin本身来定义.spanX
类的代码。因此,您应该能够执行以下操作:
.myclass {
.span(3);
// other rules...
}
该.span(3)
代码是循环用来填充.span3
类的代码,因此为您的类调用该代码将提供与之相同的代码.span3
。具体来说,引导程序为此mixins.less
混合定义了以下定义:
.span (@columns) {
width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1));
*width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%);
}
所以,你会得到width
的属性.span3
在你的.myclass
。