4

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

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

编辑

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

4

3 回答 3

11

新答案（需要 LESS 1.4.0）

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

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

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

原始答案

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

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

主要问题

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

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

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

修复

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

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

该.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%);
}

因此，您将width获得..span3.myclass

于 2013-03-22T14:47:56.103 回答
1

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

答案是否定的。

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

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

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

于 2013-05-15T01:22:41.670 回答
0

好吧，你可以这样做，但你必须先定义.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;
    }
}
于 2013-03-21T18:01:28.270 回答