使用 SASS 在 Twitter Bootstrap on Rails 3.1 中更改颜色答案

【问题标题】：Changing colors in Twitter Bootstrap on Rails 3.1 with SASS使用 SASS 在 Twitter Bootstrap on Rails 3.1 中更改颜色
【发布时间】：2011-11-30 11:08:01
【问题描述】：

Twitter Bootstrap 是 Twitter 基于 LESS 的一个很酷的样式表工具包。我不使用 LESS，但我使用的是 twitter-bootstrap-rails gem，它似乎一切正常。但是我无法弄清楚如何更改 CSS 中的颜色，尤其是链接颜色。

我的进一步研究似乎表明 gem 只提供了一个带有固定颜色声明的预渲染 CSS 文件，而不是可以在一个地方更改的变量。我希望能够通过更改 $linkColor = #00ff00 之类的变量来更改颜色

有没有人知道如何在不使用 LESS 的情况下在整个 UI 中有效地进行颜色更改？

我想避免使用 LESS，因为 Rails 3.1 已经使用了 SASS，但如果这里有人认为两者都用，我愿意接受建议。

任何帮助或建议将不胜感激

【问题讨论】：

有人知道怎么做吗？
我仍在使用 LESS，通过这个 gem github.com/metaskills/less-rails-bootstrap 我想避免在我的应用程序的其余部分在 Rails 3.1 标准 SASS/ 中时更改 LESS 中的变量来更改颜色SCSS。

标签： ruby-on-rails ruby-on-rails-3.1 sass less twitter-bootstrap

【解决方案1】：

我写了一个相当流行的 Bootstrap 到 SASS 的转换 ^{1, 2}，如果你使用自定义帮助清单，它允许你定义你自己的变量，而不是包含在宝石。

以application.css.scss的头部为例：

@import "bootstrap/reset";
@import "bootstrap/variables";

// overwrite variables here

@import "bootstrap/mixins";

@import "bootstrap/scaffolding";

@import "bootstrap/type";
@import "bootstrap/forms";
@import "bootstrap/tables";
@import "bootstrap/patterns";

// rest of your manifest

您可以在导入其余引导文件之前覆盖the supported variables，这些文件也可以通过您的其余 SCSS 访问。

【讨论】：

这是很棒的东西，托马斯。谢谢你把它放在那里！
@Thomas McDonald 我想知道是否有使用“bootstrap-sass”覆盖引导程序的混合（例如边界半径）的示例？
找不到或无法读取要导入的文件：引导/重置。知道如何正确地做到这一点吗？

【解决方案2】：

我找到了一个很好的折衷方案：我将 .less 源代码保存在一个文件夹下，并且我有一个守卫命令将其编译为 css 直接到供应商/资产。

这允许我在一个额外的 .less 中在有意义的地方使用 less mixins（即：添加新颜色），并将应用程序的其余部分保留在 scss 中。

我这样做是因为我真的想直接依赖 twitter boostrap 源，而不是依赖于稍后可能会滞后的 scss 改编。

如果您需要更多详细信息，请与我联系，我计划在此发表一篇博文。

【讨论】：

请在此处发布该博客文章的链接，它将非常有用。
@alik 我一定会把它贴在这里，马上就计划好了

【解决方案3】：

我找到了两个独立的 SCSS 版本的引导文件。两者（在 preboot.scss 文件中）都允许您更改变量，例如 linkColor。

现在，我不确定如何将它们集成到您自己的应用中。但是，如果您想避免 LESS，似乎可以使用 SCSS 来完成。

【讨论】：

这种集成被证明是一个相当大的问题，而且看起来这两个版本的 Bootstrap 都已经过时了，因为需要最新的版本。我还必须包含另一个 gem 才能让 Bootstrap JS 部分正常工作，因为如果没有对应的 JS，许多 bootstrap 就无法正常工作。所以我切换回使用 less-rails-bootstrap gem，直到找到更好的 SCSS 解决方案。如果您知道，请告诉我