Less and Bootstrap：如何使用span3（或spanX [任何数字]）类作为mixin？

新答案（要求LESS 1.4.0）

您真正想要的是在LESS和SASS术语中_扩展的_
东西。例如，您需要一个HTML元素（仅作为示例）…

<div ></div>

......以 充分 行为，如果它有一个

span3

从添加到它引导类，但实际上不添加该类的HTML。这可以在LESS
1.4.0中使用来完成

:extend()

，但仍然不容易，主要是因为动态类引导的生成不会被拾取

:extend()

。

这是一个例子。假定此初始LESS代码（ 不像

.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

。这与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

。