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

Less and Bootstrap: how to use a span3 (or spanX [any number]) class as a mixin?

提问by Federico Bellucci

Is it possibile to add span3class in a mixin to avoid putting it in every element in my HTML? Something like:

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

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

EDIT

编辑

I apologize I forgot to specify an important detail: span3is a standard class of Bootstrap. I didn't find its definition in any file of the Bootstrap framework.

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

回答by ScottS

New Answer (requires LESS 1.4.0)

新答案（需要 LESS 1.4.0）

What you actually desire is something known as extendingin LESS and SASS terminology. For example, you want an HTML element (just an example)...

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

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

...to fullybehave as if it had a span3class from bootstrap added to it, but without actually adding that class in the HTML. This can be done in LESS 1.4.0 using :extend(), but still not easily, mainly because of the dynamic class generation of bootstrap will not be picked up by :extend().

...完全表现得好像它span3添加了一个来自引导程序的类，但实际上没有在 HTML 中添加该类。这可以在 LESS 1.4.0 using 中完成:extend()，但仍然不容易，主要是因为 bootstrap 的动态类生成不会被:extend().

Here is an example. Assume this initial LESS code (notdynamically generated .span3classes as bootstrap does):

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

.span3 {
  width: 150px;
}

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

.someOtherClass.span3 {
  background: blue;
}

You add this LESS code in 1.4.0:

你在 1.4.0 中添加了这个 LESS 代码：

.myclass {
  &:extend(.span3);
}

Which produces this CSS:

产生这个CSS：

.span3,
.myclass {
  width: 150px;
}
.someClass .span3 {
  font-size: 12px;
}
.someOtherClass.span3 {
  background: blue;
}

NOTEhow it did notautomatically extend the other instances of .span3. This is different than SASS, but it only means you need to be a bit more explicit in extending. This has the advantage of avoiding excessive CSS code bloat.

请注意它如何没有自动扩展.span3. 这与 SASS不同，但这仅意味着您需要在扩展方面更加明确。这具有避免过度的 CSS 代码膨胀的优点。

To fully extend, simply add the allkeyword in the extend()(this is updated from my original code, as I was unaware of the alloption):

要完全扩展，只需在中添加all关键字extend()（这是从我的原始代码更新的，因为我不知道该all选项）：

.myclass {
  &:extend(.span3 all);
}

Which produces this:

产生这个：

.span3,
.myclass {
  width: 150px;
}
.someClass .span3,
.someClass .myclass {
  font-size: 12px;
}
.someOtherClass.span3,
.someOtherClass.myclass {
  background: blue;
}

That makes your .myclassfully equivalent(in my example) to the .span3class. What this means in your case, however, is that you need to redefine any dynamic class generations of bootstrap to be non-dynamic. Something like this:

这使您.myclass完全等同于（在我的示例中）.span3课堂。但是，在您的情况下，这意味着您需要将引导程序的任何动态类代重新定义为非动态的。像这样的东西：

.span3 {
  .span(3);
}

This is so the :extend(.span3)will find a hard coded class to extend to. This would need to be done for any selector string that dynamically uses .span@{index}to add the .span3.

这样:extend(.span3)就会找到一个硬编码的类来扩展。对于任何动态用于.span@{index}添加.span3.

Original Answer

原答案

This answer assumed you desired to mixinproperties from a dynamically generated class (that is what I thought your issue was).

这个答案假设您希望从动态生成的类中混合属性（这就是我认为您的问题所在）。

Okay, I believe I discovered your issue. First of all, bootstrap defines the .spanXseries of classes in the mixins.lessfile, so you obviously need to be sure you are including that in your bootstrap load. However, I assume it is a given that you have those included already.

好的，我相信我发现了你的问题。首先，引导程序定义了文件中的.spanX一系列类mixins.less，因此您显然需要确保将其包含在引导程序加载中。但是，我认为您已经包含了这些内容是理所当然的。

Main Problem

主要问题

The main issue is how bootstrap is generating those now, through a dynamic class name in a loop. This is the loop that defines the .spanXseries:

主要问题是引导程序现在如何通过循环中的动态类名生成这些。这是定义.spanX系列的循环：

.spanX (@index) when (@index > 0) {
      .span@{index} { .span(@index); }
      .spanX(@index - 1);
 }
.spanX (0) {}

Currently, because the class name itself is being dynamically generated, it cannot be used as a mixin name. I don't know if this is a bug or merely a limitation of LESS, but I do know that at present time of writing, any dynamically generated class name does not function as a mixin name. Therefore, .span3may be in the CSS code to put as a class in your HTML, but it is not directly available to access for mixin purposes.

目前，由于类名本身是动态生成的，因此不能用作混合名称。我不知道这是一个错误还是仅仅是 LESS 的一个限制，但我知道在撰写本文时，任何动态生成的类名都不能用作混合名称。因此，.span3可以在 CSS 代码中将其作为类放入 HTML 中，但不能直接用于 mixin 访问。

The Fix

修复

However, because of how they have structured the code, you can still get what you need, because as you can see above in the loop code, they use a true mixin itself to define the code for the .spanXclasses. Therefore, you should be able to do this:

但是，由于他们构建代码的方式，您仍然可以获得所需的内容，因为正如您在上面的循环代码中看到的那样，他们使用真正的 mixin 本身来定义.spanX类的代码。因此，您应该能够做到这一点：

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

The .span(3)code is what the loop is using to populate the .span3class, so calling it for your classes will give the same code that .span3has. Specifically bootstrap has this defined in mixins.lessfor that mixin:

该.span(3)代码是循环用于填充.span3类的内容，因此为您的类调用它会给出与该类相同的代码.span3。特别是 bootstrapmixins.less为该 mixin定义了这个：

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

So you will get the widthproperties for the .span3in your .myclass.

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

回答by jonschlinkert

This is easy to accomplish with Less.js, but the real question is: "Should I mix structural grid classes with my non-structural classes?"

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

And the answer is no.

答案是否定的。

This is a bad idea, the advantage of a grid system is that it creates a separation of concerns between structural styling and other styling. I'm not saying "it should never, ever, ever be done". But in general, it shouldn't. I don't even like seeing this:

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

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

Where the span3is in the same divas the .sidebarclass. The problem with this is that now your sidebar is not just "floating around" inside a column of the grid, it has become part of the grid - which (in general) makes it even more difficult to maintain your styles because of the workarounds you need to create to force this kind of styling to be responsive.

凡span3在同div为.sidebar类。这样做的问题是，现在您的侧边栏不仅仅是在网格的一列内“浮动”，它已经成为网格的一部分 - 这（通常）使得由于您的变通方法而更加难以维护您的样式需要创建以强制这种样式具有响应性。

回答by Kyrbi

Well you can do it but you have to define .somethignfirst, in this example I will do it font-wight: bold;and font-size 20px. As you can see in second class .body I didn't have to define font-weight: bold;and font-size: 20px;I just added .somethinginto it

好吧，您可以这样做，但您必须先定义.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
}

You can see example here. http://jsfiddle.net/7GMZd/

您可以在此处查看示例。http://jsfiddle.net/7GMZd/

YOU CAN'T DO IT THIS WAY

你不能这样做

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