使用SASS在Rails 3.1上的Twitter Bootstrap中更改顏色

Question

Twitter Bootstrap是Twitter基於LESS的一個很酷的樣式表工具包。 我不使用LESS，但是我使用的是twitter-bootstrap-rails gem，它似乎一切正常。 但是我無法弄清楚如何更改CSS中的顏色，尤其是鏈接顏色。

我的進一步研究似乎指出，gem僅提供具有固定顏色聲明的預渲染CSS文件，而不提供可以在一處更改的變量。 我希望能夠通過更改$linkColor = #00ff00類的變量來更改顏色

有沒有人知道如何在不使用LESS的情況下有效地在整個UI中進行顏色更改？

我想避免使用LESS，因為Rails 3.1已經使用了SASS，但是如果這里的任何人認為同時使用SASS沒什么大不了的話，我歡迎您提出建議。

任何幫助或建議將不勝感激

Answer 1

我寫了引導的合理流行的轉換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

您可以在導入其余的引導文件之前覆蓋受支持的變量 ，這些變量也可以通過其余的SCSS訪問。

Answer 2

我找到了一個不錯的折衷方案：我將.less源保存在一個文件夾下，並且我有一個警衛命令將其編譯為CSS，直接發送給供應商/資產。

這使我可以在有意義的地方（即：添加新顏色）在附加的.less中使用較少的mixins，並將其余應用程序保持在scss中。

我這樣做是因為我真的很想直接依靠twitter boostrap的源代碼，而不是依賴於以后可能在某個時候落后的scss改編版。

如果您需要更多詳細信息，請與我聯系，我計划在此發表一篇博客文章。

Answer 3

我發現了引導文件的兩個單獨的SCSS版本。 兩者（在preboot.scss文件中）都允許您僅更改諸如linkColor之類的變量。

• bootstrap.scss
• Twitter的引導，SCSS

現在，我不確定如何將它們集成到您自己的應用程序中。 但是，如果您想避免LESS，似乎可以使用SCSS來完成。