Less和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来自bootstrap 的类添加到它,但没有在HTML中实际添加该类.这可以在LESS 1.4.0中使用:extend(),但仍然不容易,主要是因为动态类生成的bootstrap不会被拾取:extend().

这是一个例子.假设这个初始LESS代码(不是动态生成的.span3类作为bootstrap):

.span3 {
  width: 150px;
}

.someClass .span3 {
  font-size: 12px;
}

.someOtherClass.span3 {
  background: blue;
}

您在1.4.0中添加此LESS代码:

.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) {}

目前,由于类名本身是动态生成的,因此不能将其用作mixin名称.我不知道这是一个bug还是仅仅是LESS的限制,但我知道在目前的写作时,任何动态生成的类名都不能作为mixin名称.因此,.span3可能在CSS代码中将其作为一个类放在HTML中,但它不能直接用于mixin目的.

修复

但是,由于它们如何构造代码,您仍然可以获得所需的内容,因为正如您在循环代码中看到的那样,它们使用真正的mixin本身来定义.spanX类的代码.因此,您应该能够这样做:

.myclass {
    .span(3);
    // other rules...
}

该.span(3)代码是什么循环使用填充.span3类,因此称它为你的类将给予相同的代码.span3了.特别是bootstrap mixins.less为mixin 定义了这个:

.span (@columns) {
  width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1));
  *width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%);
}

所以,你会得到width的属性.span3在你的.myclass.