2

所以我安装了twitter-bootstrap-railsgem。我运行生成器来创建一个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，我不明白为什么。

4

3 回答 3

2

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

#container {
    .center-block();
}

.foo-wrapper {
    .makeRow();
}

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

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

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

于 2012-07-17T19:10:31.487 回答
2

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

它允许您使用另一个类扩展一个类

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

会产生：

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

LESS和SASS的比较

所以你可以转向一个 sass 的 bootstrap 实现，然后做你想做的事。https://github.com/thomas-mcdonald/bootstrap-sass）

于 2012-06-01T02:03:00.907 回答
1

我将https://github.com/thomas-mcdonald/bootstrap-sass与 Compass 一起使用，它工作正常。

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

或者你可以看看这个： 如何在不使用 mixin 的情况下在 sass 中重用一个类？

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

于 2012-11-13T03:11:12.887 回答