Twitter Bootstrap Rails：如何通过重用类来编写语义HTML？

Question

因此，我安装了twitter-bootstrap-rails gem。 我运行生成器来创建bootstrap_and_overrides.css.less文件。 现在，我想写一些语义HTML。 所以不用写：

<div class="container">
  <div class="row">
    <div class="span2">Column1</div>
    <div class="span6">Column2</div>
  </div>
</div>

我希望能够写：

<div id="foo-wrapper">
  <div class="foo">
    <div class="foo-left">Column1</div>
    <div class="foo-right">Column2</div>
  </div>
</div>

但是，当我尝试为此编写更少的内容时，则不会应用这些类：

// at the bottom of bootstrap_and_overrides.css.less
#foo-wrapper {
  .container;
}

我究竟做错了什么？ 不支持吗？ 我在错误的位置定义了样式吗？ 我在使用Twitter Bootstrap时使用了错误的gem吗？

更新：

这是bootstrap_and_overrides.css.less的评论：

// Your custom LESS stylesheets goes here
//
// Since bootstrap was imported above you have access to its mixins which
// you may use and inherit here

由于某种原因，我似乎无法访问mixins，而且我也不明白为什么。

Answer 1

看起来您想要一个名为“选择器继承”的SASS功能。

它允许您将一个类扩展为另一个类

.bordered {      
  border: 1px solid back; 
} 
#menu a {                   
  @extend .bordered;      
}  

将产生：

.bordered, #menu a {
border: 1px solid back; }

LESS和SASS的比较

因此，您可以转到引导的sass实现中，然后执行您想要的操作。 https://github.com/thomas-mcdonald/bootstrap-sass ）

Answer 2

您应该仔细检查Bootstrap的mixins 。 相反，您会想要类似

#container {
    .center-block();
}

.foo-wrapper {
    .makeRow();
}

.foo-left {
    .makeColumn(8,0);
}

.foo-right {
    .makeColumn(4,0);
}

这些mixins会填充那些特殊的Bootstrap类。

Answer 3

我在Compass中使用https://github.com/thomas-mcdonald/bootstrap-sass ，它工作正常。

就像@Jesse Wolgamott所说的，“选择器继承”功能！

或者您可以查看以下内容： 如何在不使用Mixin的情况下重用sass中的类？

重用span *时，这个问题很常见：
如何在Rails应用程序中将Twitter Bootstrap与Bootstrap-Sass结合使用？