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

Posted 2023-02-22

【中文标题】Less 和 Bootstrap：如何使用 span3（或 spanX [任意数量]）类作为 mixin？

【英文标题】：Less and Bootstrap: how to use a span3 (or spanX [any number]) class as a mixin?

【发布时间】：2013-03-11 06:41:10

【问题描述】：

是否可以在 mixin 中添加 span3 类以避免将其放入我的 html 中的每个元素中？ 比如：

.myclass 
    .span3;
    // other rules...

编辑

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

【问题讨论】：

简短的回答是“是”，假设.span3 是在代码中定义的。什么不适合你？您可能需要使用更多细节来编辑您的问题。

【参考方案1】：

你可以这样做，但你必须先定义.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;
    

【讨论】：

感谢您的回答，但我忘记在我的问题中指定一个重要细节。我更新了我的问题

仅供参考，除非我遗漏了什么，否则您没有向 jsfiddle 添加外部资源（例如less.js），这将允许它编译更少。更好的测试资源是 less2css.org

【参考方案2】：

新答案（需要 LESS 1.4.0）

您真正想要的是在 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 属性。

【讨论】：

对主要问题的精彩解释和修复的好主意，但不幸的是它对我不起作用。你试过了吗？ less 编译成 css 没有错误，并且给元素添加了一些宽度属性，但是 span3 类本身没有添加，所以其他基于 span3 类存在的规则不会执行。

包括 .span3 类作为 mixin（这是您的问题似乎在寻求答案）和添加类 之间是有区别的 到一个元素，这不是通过 css 或 LESS 完成的，而是在 HTML 中完成的。所以是的，像.span3 .someChildClass 这样的规则将不适用于将.span3 作为mixin 包含在内的元素。如果这是您需要的，您必须通过 HTML 来完成。

@Uccio：只是为了澄清我之前的评论。 mixin 不会将类添加到具有它正在混合的类的元素中。因此，您的 .myclass 不会通过 mixin 获得 .span3 类。它获得的是.span3 类的属性 到.myclass。

我的问题很明确：“是否可以在 mixin 中添加 span3 类以避免将其放入我的 HTML 中的每个元素中？”我的目标是重现 span3 类的存在，而不是显式地将它添加到每个元素中。因此，将 span(x) 添加到 mixin 并不是解决方案，显然根本没有。

@Uccio：有点令人困惑的是“在 mixin 中添加 span3 类”的解释。了解 LESS 的功能后，我将其读作“通过 mixin 添加 span3 类属性”，因为这是 mixin 所做的，它们从类中添加属性，而不是类本身。我不知道你不知道这个事实:-)。 LESS 1.4 中有部分解决方案。我会更新我的答案，但它仍然不会像你想要的那样“漂亮”。

【参考方案3】：

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

答案是否定的。

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

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

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