Question

是否有可能在mixin中添加span3类以避免将其放入HTML中的每个元素中？类似的东西：

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

修改

我道歉我忘了指定一个重要细节：span3是Bootstrap的标准类。我没有在Bootstrap框架的任何文件中找到它的定义。

Answer 1

新答案（需要LESS 1.4.0）

你真正想要的是在LESS和SASS术语中称为extending的东西。例如，你想要一个HTML元素（只是一个例子）......

<div class="myclass"></div>

... 完全的行为就像是从引导程序中添加了span3类，但没有在HTML中实际添加该类。这可以使用:extend()在LESS 1.4.0中完成，但仍然不容易，主要是因为:extend()无法获取动态类生成引导程序。

这是一个例子。假设这个初始LESS代码（不动态生成.span3类作为引导程序）：

.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的其他实例。这是不同的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的任何选择器字符串，都需要执行此操作。

原始答案

这个答案假设您想要动态生成的类 mixin 属性（这就是我认为您的问题）。

好的，我相信我发现了你的问题。首先，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中为mixin定义了这个：

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

因此，您将获得width中.span3的{{1}}属性。

Answer 2

使用Less.js很容易实现，但真正的问题是：“我应该将结构网格类与我的非结构类混合吗？”

答案是肯定的。

这是一个坏主意，网格系统的优势在于它创建了结构样式和其他样式之间的关注点分离。我不是说“它永远不应该永远不会完成”。但总的来说，它不应该。我甚至不喜欢看到这个：

<div class="span3 sidebar">
  <ul class="nav">
    ...
  </ul>
</div>

span3与div类位于同一.sidebar的位置。这个问题是，现在你的侧边栏不仅仅是在网格的一个列中“浮动”，它已成为网格的一部分 - 由于你的解决方法（通常）这使得维护你的风格变得更加困难需要创建以迫使这种样式响应。

Answer 3

您可以这样做，但您必须首先定义.somethign，在此示例中，我将执行font-wight: bold;和font-size 20px。正如您在第二类.body中所看到的，我没有必要定义font-weight: bold;和font-size: 20px;我刚刚将.something添加到其中

.something {
    font-weight: bold;
    font-size: 20px;
}
.body {
    background-color: gray;
    border: ridge 2px black;
    .something
}

你可以在这里看到例子。 http://jsfiddle.net/7GMZd/

你不能这样做

.body {
    background-color: gray;
    border: ridge 2px black;
    .something {
         font-weight: bold;
         font-size: 20px;
    }
}

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

3 个答案:

新答案（需要LESS 1.4.0）

原始答案