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我无法访问引导代码中较少定义的变量+ mixins，如@gray，{{ 1}}等等。

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

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

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;

Answer 2

我想出了一种可能的方法来做到这一点，而不会导致（太多）重复CSS代码。

application.css

/*
 *= require twitter/bootstrap
 *= require mystyles
 */

mystyles.css

@import "twitter/bootstrap/variables.less";
@import "twitter/bootstrap/mixins.less";
/* My styles come here, which use variables & mixins defined in twitter bootstrap code */