ruby-on-rails - 如何通过 Twitter Bootstrap 在 Rails 项目中使用 Preboot mixin

Question

我正在寻找一种在我的 Rails 项目中使用 Less Preboot mixin 的方法。

宝石 Gemfile：

gem "less-rails"
gem "twitter-bootstrap-rails"

布局 application.html.erb：

<%= stylesheet_link_tag "application", :media => "all" %>

样式表 application.css.less.erb：

/*
 *= require bootstrap_and_overrides
 *= require_self
 */

.navbar .navbar-inner {
  #gradient > .vertical(#333,#000);
}

但是#gradient > .vertical没有找到 Preboot mixin，给出了这个错误：

#gradient > .vertical is undefined
  (in */app/assets/stylesheets/application.css.less.erb)

Bootstrap Github 页面告诉我它是使用 Preboot 构建的：

“Bootstrap 是使用 Preboot 构建的”（来源：https ://github.com/seyhunak/twitter-bootstrap-rails#using-with-less ）

Answer 1

我相信您必须定义 - 覆盖 Twitter Bootstrap 提供的样式 -bootstrap_and_overrides.css.less文件中的所有 css 组件。您可以通过您的应用程序创建ids和classes定义该文件中的样式...嗯，这就是我使用的方式twitter-bootstrap-rails...

还有其他选择......这篇文章比较了其中一些：http ://rubysource.com/twitter-bootstrap-less-and-sass-understanding-your-options-for-rails-3-1/

此外，还有一个非常好的 railscast：http ://railscasts.com/episodes/328-twitter-bootstrap-basics?view=asciicast

Answer 2

如果你想在你的 Rails 项目中使用 Preboot mixin 和 twitter bootstrap，你需要在你想使用它们的 LESS 文件的顶部添加以下内容：

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

在此之后，您可以使用渐变和所有其他 Preboot mixin：

#content {
  #gradient > .vertical( #eee, #ccc );
}