Using Bootstrap, LESS, & Mixins

I recommend using bower to download the bootstrap package.

bower install bootstrap --save

Then copy paste the bootstrap.less file into your app/assets/less directory and adjust the import paths. The first line looks like:

@import "../../../bower_components/bootstrap/less/mixins.less";

I didn't realize there was a SASS version of Bootstrap. I ended up sticking with SASS, downloaded the sources off of GitHub, put them in /app/assets and then created my main.scss file.

I've never worked with LESS or SASS before... Is there a way to use Bootstrap as more of a reference to only pull styles I fetch via mixins? Would be nice and would reduce the bloatedness of it.

I see that in LESS, I could do @import (reference)... I can't find a similar option in SASS. :-/

I'm not sure if you're talking about full partials or just mixins, but still... you can take a look at http://sass-lang.com/guide and you'll see that both are possible and easy to do :)

For Mixins:

@mixin border-radius($radius) {
          border-radius: $radius;
}

.box { @include border-radius(10px); }

For Partials, create one called, for example, _navbar.scss:

@import 'navbar';

PS: notice tha lack of "_" in the import :)

Never got my hands on the SASS version of Bootstrap tho, so I can't help you on that directly :)

Neither. I'm looking for SASS' equivalent of LESS' @import (reference) "bootstrap.less" http://lesscss.org/features/#import-options-reference

In other words, using that import statement will output absolutely nothing. However, if I have something like:

.some-box { 
    .col-sm-offset-2;
    .col-sm-10;
}

Then it will fetch and output the referenced styles.

Oh, right, got it. Unfortunately, I don't think there's an equivalent for that in SASS, but I haven't used it all that much lately so I might be missing something :)

Aww, well that stinks... Actually, for that reason alone, I think I'll go give LESS a try instead.

...unless I too am missing something.