将 Bootstrap 类属性嵌入到另一个类中

Question

我正在使用 Bootstrap 设置我的网站布局，并有类似的东西：

  <div class="row-fluid">
    <div class="span3">    
    </div>
    <div class="span9">
    </div>
  </div>

效果很好。但是，我有点担心这是在标记中定义表示并且为了更容易进行未来的更改，我想添加另一层间接。我想添加我自己的定义语义的类，然后包含定义布局表示的 Bootstrap 类。例如：

  <div class="main-block">
    <div class="side-bar">    
    </div>
    <div class="content-area">
    </div>
  </div>

还有我对应的less文件...

@import "twitter/bootstrap";
.main-block { .row-fluid }
.side-bar { .span3 }
.content-area { .span9 }

less 文档指出，您可以“通过简单地将类名作为其属性之一将类的所有属性嵌入到另一个类中”，因此它看起来应该可以工作，但我收到了一个错误：

.row-fluid 未定义

有什么我遗漏的吗？还是有更好的方法来解决这个问题？这是在使用 less-rails-bootstrap gem 的 rails 3.2 项目中，如果这有什么不同的话。

Answer 1

这有点复杂。您所指的本质上是“mixins”的全部内容。首先，让我们解决错误。从一点我看我的赌注是，您正在尝试编译“自定义”.less 文件，并且您没有 @import 页面顶部的 variables.less 和 mixins.less 文件。那是对的吗？如果是这样，请查看是否可以按预期编译代码。

但是，一旦您获得要编译的代码，您就会发现您遇到了一个新问题。在这种特殊情况下，如果尝试使用.span 以外的名称，您将丢失网格混合中的属性选择器应用的任何样式，即[class*="span"]。编译好后是这样的：

[class*="span"] { float: left; margin-left: 20px; }
.row-fluid [class*="span"] {}
.row-fluid [class*="span"]:first-child { margin-left: 0; }

所以在这种情况下，属性选择器将它们的样式应用于任何以“span”开头的类。

这里有几个选项可能更适合您：

1) 在您的自定义类名之前添加单词“span”应该起作用

<div class="row main-block">
  <div class="span-side-bar">
  </div>
  <div class="span-content-area">
  </div>
</div>

2) 并且使用多个类将工作，但只有当你没有对自定义类应用任何样式，这将否定本机网格类中的任何样式：

<div class="row main-block">
  <div class="span3 side-bar">
  </div>
  <div class="span9 content-area">
  </div>
</div>

3) 我的建议是使用一些额外的标记来维护默认的 Bootstrap 网格系统。重命名现在听起来很棒，但如果您希望在未来的更新中合并，我会单独留下一个 mixin 是网格。

  <div class="row">
    <div class="span3">
      <div class="side-bar">
      </div>      
    </div>
    <div class="span9">
      <div class="content-area">
      </div>      
    </div>
  </div>