How to use twitter bootstrap with bootstrap-sass in rails app?

Answer 1

You are right. Twitter is pushing an ani-patter here. See this article.

http://ruby.bvision.com/blog/please-stop-embedding-bootstrap-classes-in-your-html

Answer 2

Using boostrap-sass 2.3.2.2 gem I had to create my own mixin based on bootstrap's mixins to make CSS classes act like bootstrap .span classes.

// private mixin: add styles for bootstrap's spanX classes
@mixin _makeFluidSpan($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth) {
  @include input-block-level();
  float: left;
  margin-left: $fluidGridGutterWidth;
  *margin-left: $fluidGridGutterWidth - (.5 / $gridRowWidth * 100px * 1%);
  @include grid-fluid-span($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth);
}

// thats what you should use
@mixin makeFluidSpan($gridColumns) {
  @media (min-width: 980px) and (max-width: 1199px) {
    @include _makeFluidSpan($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth);
  }
  @media (min-width: 1200px) {
    @include _makeFluidSpan($gridColumns, $fluidGridColumnWidth1200, $fluidGridGutterWidth1200);
  }
  @media (min-width: 768px) and (max-width: 979px) {
    @include _makeFluidSpan($gridColumns, $fluidGridColumnWidth768, $fluidGridGutterWidth768);
  }
  &:first-child {
    margin-left: 0;
  }
  @media (max-width: 767px) {
    float: none;
    display: block;
    width: 100%;
    margin-left: 0;
    box-sizing: border-box;
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
}

example:

  .like-span3 { // this class acts like .span3
    @include makeFluidSpan(3);
  }

Answer 3

It's your use of @extend, or rather, Sass' inability to deal with wildcard class matching, which is rather unsurprising, since it gets rather complex.

Bootstrap uses a number of what I might refer to as 'nonstandard' methods to address some classes. You've mentioned one of those in your post above - [class*="span"].

Naturally, when you use @extend x, Sass is extending the x class. Unfortunately, it (currently) has no way of knowing that a wildcard matcher also affects the output of the class. So yes, in an ideal world, [class*="span"] would also be extended to define [class*="span"], .user-filter, but Sass can't currently do that.

While extending .row-fluid is enough to include the rules nested underneath it wrt. the span classes, as per above, it won't adjust the wildcards for extended spans.

bootstrap-sass already had a mixin for fixed width columns/rows, makeRow() and makeColumn(). I've just pushed a makeFluidColumn() mixin, that, well, makes a fluid span. Your code would then become:

.user-container {
  @extend .row-fluid;
}

.user-filter {
  @include makeFluidColumn(2);
}

.user-list {
  @include makeFluidColumn(10);
}

Unfortunately (as per usual) it's not quite so simple. Bootstrap uses this snippet to reset the margin on the first spanx class that is a child of the row.

> [class*="span"]:first-child {
  margin-left: 0;
}

However, we cannot redefine this for each call of makeFluidColumn, and so we must manually set no margin-left on any element that will be the first child of a fluid row. It's also worth noting that mixing spanx classes and makeFluidColumn classes will cause the first spanx class to have its margin reset, regardless of whether it's actually the first column in the row.

Your code would therefore be

.user-container {
  @extend .row-fluid;
}

.user-filter {
  @include makeFluidColumn(2);
  margin-left: 0; // reset margin for first-child
}

.user-list {
  @include makeFluidColumn(10);
}

It's not a particularly pretty solution, but it works, and is all to do with how Bootstrap uses wildcard class matching, as you gathered in your question update. I've only just pushed this to the 2.0.2 branch, so you'll have to use Bundler with Git to install it, but I'm hoping for a release in the next couple of days.