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;"

Beau Smith · Accepted Answer · 2012-12-30 21:43:15Z

9

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";

answered Dec 30, 2012 at 21:43

Beau Smith

34.5k14 gold badges97 silver badges102 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rodrigo Zurek · Accepted Answer · 2012-07-28 23:31:42Z

4

to modify variables in saas, modify them before importing bootstrap

.alert{
  margin-top:-40px;
}



@import "bootstrap";
@import "bootstrap-responsive";

here in an example in my app

answered Jul 28, 2012 at 23:31

Rodrigo Zurek

4,5759 gold badges36 silver badges45 bronze badges

Collectives™ on Stack Overflow

Modifying Bootstrap variables when using bootstrap-sass

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related