Changing colors in Twitter Bootstrap on Rails 3.1 with SASS

Twitter Bootstrap is a cool stylesheet toolkit by Twitter based on LESS. I don't use LESS however I am using the twitter-bootstrap-rails gem and it 开发者_如何学Pythonseems to be all working fine. However I am unable to figure out how to change the colors in the CSS, particularly the link color.

My further research seems to point that the gem only provides a pre-rendered CSS file with fixed colors declarations and not variables that could be changed in one place. I would love to be able to just change the colors by changing a variable like $linkColor = #00ff00

Does anyone have any idea as to how to do the color changes efficiently throughout the UI without using LESS?

I want to avoid using LESS since Rails 3.1 already uses SASS, but if anyone here thinks its not a big deal using both, I'm open to suggestions however.

Any help or suggestion will be much appreciated

I wrote a reasonably popular conversion of Bootstrap to SASS ^{1, 2}, which allows you to define your own variables if you use a custom helper manifest, rather than the one included in the gem.

As an example, in the head of 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

You can overwrite the supported variables before importing the rest of the bootstrap files, and these will also be accessible through the rest of your SCSS.

I found a good compromise: I keep the .less source under a folder, and I have a guard command to compile this to css directly to vendor/assets.

This allows me to use the less mixins inside an additional .less where it makes sense (ie: to add a new color), and keep the rest of the app in scss.

I did that because I really wanted to rely directly on the twitter boostrap source, not on a scss adaptation which may lag behind later on at some point.

Contact me if you need more details, I plan a blog post on that.

I found two separate SCSS versions of the bootstrap files. Both (in the preboot.scss file) allow you to just change a variable for things like linkColor.

• bootstrap.scss
• twitter-bootstrap-scss

Now, how to integrate those into your own app, I'm not sure. But it appears it can be done with SCSS if you want to avoid LESS.