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

Question

是否可以span3在mixin中添加类以避免将其放在HTML的每个元素中？就像是：

.myclass {
    .span3;
    // other rules...
}

编辑

抱歉，我忘记指定一个重要的细节：这span3是Bootstrap的标准类。我在Bootstrap框架的任何文件中都找不到它的定义。

Answer 1

新答案（要求LESS 1.4.0）

您真正想要的是在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;
}

您在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。