是否可以在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属性。

09-25 18:51