ruby-on-rails - Twitter Bootstrap Rails : How to write semantic HTML by reusing classes?

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>

但是，当我尝试为此编写 less 时，这些类并未应用:

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

我做错了什么？这是不支持的吗？我是否在错误的地方定义了我的风格？我是否使用了错误的 gem 来使用 Twitter Bootstrap？

更新:

这是 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

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

Answer 1

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

它可以让你用另一个类扩展一个类

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

会产生:

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

Comparison of LESS and SASS

因此，您可以转向 bootstrap 的 sass 实现，然后完全按照您想要的方式进行。 https://github.com/thomas-mcdonald/bootstrap-sass )