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?