Rails 3: Access to twitter bootstrap variables + mixins without importing it

Question

I'm using Rails 3 for the first time (especially asset pipelining and less-rails-bootstrap), so I might be missing some really basic concept here. I've tried two approaches for including the Twitter bootstrap CSS into my project and both have problems.

Approach #1: app/assets/stylesheets/application.css has require twitter/bootstrap. This includes the bootstrap css file using a separate link/href tag, which is good. However, the problem is that in my custom CSS file, say app/stylesheets/mystyles.css I am unable to access variables+mixins defined in less within the bootstrap code, like @gray, .box-shadow, etc.

Approach #2: Put @import 'twitter/bootstrap' at the top of app/assets/stylesheets/mystyles.css. This allows me to access variables+mixins defined in less (within the bootstrap code), which is good. However, the problem is that it pulls in the entire bootstrap CSS at the top of mystyles.css increasing the filesize. If there are a bunch of different stylesheets that @import twitter/ bootstrap it would cause a lot of duplication.

What's the recommended approach for handling this situation?

Answer 1

Your answer is sufficient if you want to exclusively use the default twitter bootstrap variables. If you find yourself wanting to override the variables and have them applied to BOTH twitter bootstrap's styles AND your own styles, you'll need to do separate out your variables into its own myvariables.less file and have that file included with twitter bootstrap instead of in the manifest.

Example

application.css:

/*
 * Notice we aren't including twitter/bootstrap/bootstrap in here
 *= require bootstrap_and_overrides
 *= require mystyles
 */

bootstrap_and_overrides.less:

# Bootstrap with both bootstrap's variables, and your own
@import "twitter/bootstrap/bootstrap";
@import "myvariables";

mystyles.less:

# Your styles with both bootstrap's variables, and your own
@import "myvariables";
h1 {
  // Use 
  color: @textColor;
}

myvariables.less:

@import "twitter/bootstrap/variables";
@textColor: green;

Answer 2

I figured out a possible way to do this without leading to (too much) repetition of CSS code.

application.css

/*
 *= require twitter/bootstrap
 *= require mystyles
 */

mystyles.css

@import "twitter/bootstrap/variables.less";
@import "twitter/bootstrap/mixins.less";
/* My styles come here, which use variables & mixins defined in twitter bootstrap code */