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

Question

是否可以在 mixin 中添加 span3 类以避免将其放入我的 HTML 中的每个元素中？ 像这样的东西:

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

编辑

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

Answer 1

新答案(需要 LESS 1.4.0)

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

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

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

这是一个例子。假设这个初始 LESS 代码(不是像 Bootstrap 那样动态生成 .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 类。但是，这在您的情况下意味着您需要将 Bootstrap 的任何动态类生成重新定义为非动态的。像这样:

.span3 {
  .span(3);
}

这样 :extend(.span3) 就会找到一个硬编码的类来扩展。对于动态使用 .span@{index} 添加 .span3 的任何选择器字符串，都需要执行此操作。

原始答案

这个答案假定您希望混合动态生成的类的属性(这就是我认为您的问题所在)。

好的，我相信我发现了你的问题。首先，bootstrap defines the .spanX series of classes in the mixins.less file ，因此您显然需要确保将其包含在 Bootstrap 负载中。但是，我假设您已经包含了这些内容。

主要问题

主要问题是 Bootstrap 现在如何通过循环中的动态类名生成这些。这是定义 .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 属性。