ruby-on-rails-3 – Rails 3:访问​​twitter bootstrap变量mixins而不导入它

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

方法#1:app / assets / stylesheets / application.css需要twitter / bootstrap.这包括使用单独的链接/ href标记的bootstrap css文件,这很好.但是,问题是在我的自定义CSS文件中,比如app / stylesheets / mystyles.css我无法访问在引导代码中定义的变量mixins,如@gray,.box-shadow等.

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

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

解决方法

如果您想要专门使用默认的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;

相关文章

validates:conclusion,:presence=>true,:inclusion=>{...
一、redis集群搭建redis3.0以前,提供了Sentinel工具来监控各...
分享一下我老师大神的人工智能教程。零基础!通俗易懂!风趣...
上一篇博文 ruby传参之引用类型 里边定义了一个方法名 mo...
一编程与编程语言 什么是编程语言? 能够被计算机所识别的表...
Ruby类和对象Ruby是一种完美的面向对象编程语言。面向对象编...