Rails 3:访问​​twitter引导变量+ mixins而不导入它

Question

我第一次使用Rails 3(特别是资产流水线和less-rails-bootstrap),所以我可能会遗漏一些非常基本的概念.我已经尝试了两种方法将Twitter引导程序CSS包含到我的项目中,并且两者都有问题.

方法#1: app/assets/stylesheets/application.css有require twitter/bootstrap.这包括使用单独的链接/ href标记的bootstrap css文件,这很好.然而,问题是,在我的自定义CSS文件,说app/stylesheets/mystyles.css我无法访问引导代码中,像少定义的变量+混入@gray,.box-shadow等等.

方法2:将@import 'twitter/bootstrap'在顶部app/assets/stylesheets/mystyles.css.这允许我访问less(在bootstrap代码中)定义的变量+ mixins,这很好.但是,问题在于它会在mystyles.css增加文件大小的顶部引入整个引导程序CSS .如果有一堆不同的样式表@import twitter/ bootstrap会导致很多重复.

处理这种情况的推荐方法是什么？

Answer 1

如果您想要专门使用默认的twitter引导变量,那么您的答案就足够了.如果你发现自己想要覆盖变量并将它们应用于两个Twitter bootstrap的样式和你自己的样式,你需要将你的变量分离到它自己的myvariables.less文件中并将该文件包含在twitter bootstrap中而不​​是在清单中.

例

application.css:

/*
 * Notice we aren't including twitter/bootstrap/bootstrap in here
 *= require bootstrap_and_overrides
 *= require mystyles
 */

bootstrap_and_overrides.less:

# Bootstrap with both bootstrap's variables, and your own
@import "twitter/bootstrap/bootstrap";
@import "myvariables";

mystyles.less:

# Your styles with both bootstrap's variables, and your own
@import "myvariables";
h1 {
  // Use 
  color: @textColor;
}

myvariables.less:

@import "twitter/bootstrap/variables";
@textColor: green;