ruby-on-rails-3 – Rails 3：访问??twitter bootstrap变量mixin

发布时间：2020-12-16 19:15:19 所属栏目：百科来源：网络整理

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

我第一次使用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;

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!