是否可以在mixin中添加span3
类以避免将其放在html中的每个元素中?
类似于:
.myclass {
.span3;
// other rules...
}
编辑
很抱歉,我忘记指定一个重要的细节:
span3
是一个标准的引导类。我在引导程序框架的任何文件中都找不到它的定义。
最佳答案
新答案(要求1.4.0以下)
你真正想要的是用less和sass术语称为extending的东西。例如,你想要一个html元素(只是一个例子)。
<div class="myclass"></div>
…完全表现为它添加了bootstrap中的一个
span3
类,但实际上没有在html中添加该类。这可以用:extend()
在1.4.0版本中完成,但仍然不容易,主要是因为:extend()
无法获取引导的动态类生成。这是一个例子。假设初始代码较少(不像引导程序那样动态生成
.span3
类):.span3 {
width: 150px;
}
.someClass .span3 {
font-size: 12px;
}
.someOtherClass.span3 {
background: blue;
}
您可以在1.4.0中添加以下代码:
.myclass {
&:extend(.span3);
}
生成此css的:
.span3,
.myclass {
width: 150px;
}
.someClass .span3 {
font-size: 12px;
}
.someOtherClass.span3 {
background: blue;
}
注意它没有自动扩展
.span3
的其他实例。这是不同的than 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 defines the
.spanX
series of classes in the mixins.less
file,所以您显然需要确保将其包含在引导加载中。不过,我想这是一个给定的,你已经包括这些。主要问题
主要问题是bootstrap现在是如何通过循环中的动态类名生成这些类名的。这是定义
.spanX
系列的循环:.spanX (@index) when (@index > 0) {
.span@{index} { .span(@index); }
.spanX(@index - 1);
}
.spanX (0) {}
目前,由于类名本身是动态生成的,因此不能用作mixin名称。我不知道这是一个bug还是仅仅是一个less的限制,但我知道在编写本文时,任何动态生成的类名都不能作为mixin名称使用。因此,
.span3
可能在css代码中作为一个类放在html中,但它不能直接用于mixin访问。修复
但是,由于它们是如何构造代码的,您仍然可以得到所需的内容,因为正如您在上面的循环代码中看到的,它们使用真正的mixin本身来定义
.spanX
类的代码。因此,您应该能够做到:.myclass {
.span(3);
// other rules...
}
.span(3)
代码是循环用来填充.span3
类的代码,因此为类调用它将得到与.span3
相同的代码。具体地说,bootstrap在mixins.less
中定义了这个混音:.span (@columns) {
width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1));
*width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%);
}
因此,您将获得
width
中.span3
的.myclass
属性。