Rails 3:无需导入即可访问 twitter bootstrap 变量 + mixins [英] Rails 3: Access to twitter bootstrap variables + mixins without importing it

问题描述

我是第一次使用 Rails 3(尤其是资产流水线和 less-rails-bootstrap)，所以我可能在这里遗漏了一些非常基本的概念.我尝试了两种方法将 Twitter 引导 CSS 包含到我的项目中，但都存在问题.

I'm using Rails 3 for the first time (especially asset pipelining and less-rails-bootstrap), so I might be missing some really basic concept here. I've tried two approaches for including the Twitter bootstrap CSS into my project and both have problems.

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

Approach #1: app/assets/stylesheets/application.css has require twitter/bootstrap. This includes the bootstrap css file using a separate link/href tag, which is good. However, the problem is that in my custom CSS file, say app/stylesheets/mystyles.css I am unable to access variables+mixins defined in less within the bootstrap code, like @gray, .box-shadow, etc.

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

Approach #2: Put @import 'twitter/bootstrap' at the top of app/assets/stylesheets/mystyles.css. This allows me to access variables+mixins defined in less (within the bootstrap code), which is good. However, the problem is that it pulls in the entire bootstrap CSS at the top of mystyles.css increasing the filesize. If there are a bunch of different stylesheets that @import twitter/ bootstrap it would cause a lot of duplication.

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

What's the recommended approach for handling this situation?

推荐答案

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

Your answer is sufficient if you want to exclusively use the default twitter bootstrap variables. If you find yourself wanting to override the variables and have them applied to BOTH twitter bootstrap's styles AND your own styles, you'll need to do separate out your variables into its own myvariables.less file and have that file included with twitter bootstrap instead of in the manifest.

application.css:

application.css:

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

bootstrap_and_overrides.less:

bootstrap_and_overrides.less:

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

mystyles.less:

mystyles.less:

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

myvariables.less:

myvariables.less:

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

这篇关于Rails 3:无需导入即可访问 twitter bootstrap 变量 + mixins的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！