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

【问题标题】：Twitter Bootstrap Rails: How to write semantic HTML by reusing classes?Twitter Bootstrap Rails：如何通过重用类来编写语义 HTML？
【发布时间】：2012-06-06 03:27:12
【问题描述】：

所以我安装了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;
}

我做错了什么？这不支持吗？我是否在错误的地方定义了我的风格？我在使用 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，我不明白为什么。

【问题讨论】：

我对这样的事情很感兴趣，因为我想做一些非常相似的事情，但是使用 SASS 的选择器继承（使用@extend）我想知道这是否是一个好主意，因为类似我尝试时的行为（CSS的规则以某种方式被覆盖，然后什么也没发生）。 #foo-wrapper 的规则是否在 Firebug 中被覆盖？

标签： ruby-on-rails twitter-bootstrap less twitter-bootstrap-rails

【解决方案1】：

我正在使用 https://github.com/thomas-mcdonald/bootstrap-sass 和 Compass 而且效果很好。

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

或者你可以检查一下： How to reuse a class in sass without using a mixin?

这个问题在重用 span* 时很常见：
How to use twitter bootstrap with bootstrap-sass in rails app?

【讨论】：

【解决方案2】：

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

#container {
    .center-block();
}

.foo-wrapper {
    .makeRow();
}

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

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

哪些 mixins 来填充那些特殊的 Bootstrap 类。

【讨论】：

啊，这很有意义。

【解决方案3】：

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

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

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

会产生：

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

Comparison of LESS and SASS

因此，您可以迁移到引导程序的 sass 实现，然后完全按照您的意愿行事。 https://github.com/thomas-mcdonald/bootstrap-sass)

【讨论】：