是否可以在 mixin 中添加 span3 类以避免将其放入我的 HTML 中的每个元素中？
比如：
.myclass {
.span3;
// other rules...
}
编辑
抱歉，我忘了指定一个重要细节：span3 是 Bootstrap 的标准类。
我在 Bootstrap 框架的任何文件中都没有找到它的定义。
【问题讨论】：
.span3 是在代码中定义的。什么不适合你？您可能需要使用更多细节来编辑您的问题。
标签： css twitter-bootstrap less mixins
你可以这样做，但你必须先定义.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 和 SASS 术语中称为 extending 的东西。例如，您想要一个 HTML 元素（只是一个示例）...
<div class="myclass"></div>
...to fully 表现得好像它添加了来自引导程序的 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 中添加此 LESS 代码：
.myclass {
&:extend(.span3);
}
产生这个 CSS：
.span3,
.myclass {
width: 150px;
}
.someClass .span3 {
font-size: 12px;
}
.someOtherClass.span3 {
background: blue;
}
注意它如何自动扩展.span3 的其他实例。这与than SASS 不同，但这仅意味着您需要在扩展时更加明确。这样做的好处是可以避免过度的 CSS 代码膨胀。
要完全扩展，只需在extend() 中添加all 关键字（这是根据我的原始代码更新的，因为我不知道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，因此您显然需要确保将其包含在引导加载中。但是，我假设您已经包含了这些内容。
主要问题
主要问题是引导程序现在如何通过循环中的动态类名生成这些。这是定义.spanX 系列的循环：
.spanX (@index) when (@index > 0) {
.span@{index} { .span(@index); }
.spanX(@index - 1);
}
.spanX (0) {}
目前，因为类名本身是动态生成的，所以不能用作mixin名。我不知道这是一个错误还是仅仅是 LESS 的一个限制，但我知道在撰写本文时，任何动态生成的类名都不能用作混合名称。因此，.span3 可能会在 CSS 代码中作为一个类放入您的 HTML 中，但它不能直接用于混合目的访问。
修复
但是，由于他们对代码的结构方式，您仍然可以获得所需的内容，因为正如您在上面的循环代码中看到的那样，他们使用真正的 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%);
}
因此，您将在您的.myclass 中获得.span3 的width 属性。
【讨论】：
.span3 类作为 mixin（这是您的问题似乎在寻求答案）和添加类 之间是有区别的 到一个元素，这不是通过 css 或 LESS 完成的，而是在 HTML 中完成的。所以是的，像.span3 .someChildClass 这样的规则将不适用于将.span3 作为mixin 包含在内的元素。如果这是您需要的，您必须通过 HTML 来完成。
.myclass 不会通过 mixin 获得 .span3 类。它获得的是.span3 类的属性 到.myclass。
使用 Less.js 很容易做到这一点，但真正的问题是：“我应该将结构网格类与非结构类混合吗？”
答案是否定的。
这是一个坏主意，网格系统的优点是它在结构样式和其他样式之间创建了关注点分离。我不是说“它不应该，永远，永远做”。但总的来说，它不应该。我什至不喜欢看到这个：
<div class="span3 sidebar">
<ul class="nav">
...
</ul>
</div>
span3 与 .sidebar 类位于同一 div 中。这样做的问题是，现在您的侧边栏不仅仅是在网格的列内“浮动”，它已经成为网格的一部分 - 这（通常）由于您的变通方法而使维护您的样式变得更加困难需要创建以强制这种样式响应。
【讨论】：