在 twitter-bootstrap-rails 中使用 Less Mixins答案

【问题标题】：Using Less Mixins with twitter-bootstrap-rails在 twitter-bootstrap-rails 中使用 Less Mixins
【发布时间】：2015-03-05 03:58:15
【问题描述】：

我第一次尝试将 bootstrap mixin 与 twitter-bootstrap-rails gem 与 bootstrap 一起使用。在app/assets/stylesheets/custom.less 文件中，我有以下内容

.form-left{
  .col-md-4;
  .col-md-offset-2;
}

所以我的目标是让form-left 类表现得好像它与引导类col-md-4 和.col-md-offset-2 一起设置样式。

问题是当我启动页面时，我遇到以下错误：

.col-md-offset-2 未定义（在 app/assets/stylesheets/custom.less 中）

我可能会遗漏什么？很可能这很简单，因为我对此很陌生。

非常感谢您的指导！

【问题讨论】：

【解决方案1】：

确保首先加载正确的 mixins 和变量：

@import "twitter/bootstrap/mixins.less";
@import "twitter/bootstrap/variables.less";

对于使用列作为混合，语法是不同的。在你的具体情况下，试试这样：

.make-md-column(4) .make-md-column-offset(2)

【讨论】：

您好 Sander，感谢您的回复！我用@import "twitter/bootstrap/grid.less"; 试了一下，并被告知.make-md-column(4) is undefined，所以我根据twittter-bootstrap-rails docs: @import "twitter/bootstrap/variables.less"; 和@import "twitter/bootstrap/mixins.less"; 导入，它就像一个魅力。我已将修改包含在您的答案的编辑中。永远不会猜到您指出的语法差异。非常感谢！
你是对的。 twitter/bootstrap/mixins.less 正在加载 grid.less。将我的答案更改为 import twitter/bootstrap/mixins.less
我测试了一下，发现我还需要@import "twitter/bootstrap/variables.less";才能通过undefined错误。
好吧，不知道。再次更新答案。谢谢！