Modifying Bootstrap variables when using bootstrap-sass

Question

Here are all the less bootstrap variables: http://twitter.github.com/bootstrap/less.html

I've used the bootstrap-sass gem to add twitter bootstrap to my rails app which means I'm using sass. How do I modify/edit these less variables in my bootstrap_and_overrides.css.scss file?

When I try to do something like this:

@navbarBackground: #3D368B;

I get:

Sass::SyntaxError in Pages#home

Showing /Users/justme/myproject/app/views/layouts/application.html.erb where line #5 raised:

Invalid CSS after "@navbarBackground:": expected pseudoclass or pseudoelement, was " #3D368B;"

Answer 1

Variables in Sass start with a dollar sign ($) not an at symbol (@) which is used in Less.

Try this:

$navbarBackground: #3D368B;
@import "bootstrap";
@import "bootstrap-responsive";