Как использовать twitter bootstrap с bootstrap-sass в приложении rails?

Это ваше использование @extend, или, скорее, неспособность Sass иметь дело с сопоставлением классов с подстановочными знаками, что неудивительно, поскольку становится довольно сложным.

Bootstrap использует ряд методов, которые я бы назвал «нестандартными», для работы с некоторыми классами. Вы упомянули один из них в своем посте выше - [class*="span"].

Естественно, когда вы используете @extend x, Sass расширяет класс x. К сожалению, (в настоящее время) нет возможности узнать, что сопоставление с подстановочными знаками также влияет на вывод класса. Так что да, в идеальном мире [class*="span"] также можно было бы расширить, чтобы определить [class*="span"], .user-filter, но в настоящее время Sass не может этого сделать.

В то время как расширения .row-fluid достаточно, чтобы включить вложенные под ним правила. классы интервалов, как указано выше, он не будет настраивать подстановочные знаки для расширенных интервалов.

У bootstrap-sass уже был миксин для столбцов/строк фиксированной ширины, makeRow() и makeColumn(). Я только что нажал миксин makeFluidColumn(), который, ну, делает плавный спэн. Тогда ваш код станет:

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

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

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

К сожалению (как обычно) все не так просто. Bootstrap использует этот фрагмент для сброса поля для первого класса spanx, который является дочерним элементом строки.

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

Однако мы не можем переопределять это для каждого вызова makeFluidColumn, поэтому мы должны вручную не устанавливать значение margin-left для любого элемента, который будет первым дочерним элементом гибкой строки. Также стоит отметить, что смешивание классов spanx и классов makeFluidColumn приведет к сбросу поля первого класса spanx, независимо от того, является ли он на самом деле первым столбцом в строке.

Таким образом, ваш код будет

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

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

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

Это не особенно красивое решение, но оно работает, и все это связано с тем, как Bootstrap использует сопоставление классов с подстановочными знаками, как вы поняли в своем обновлении вопроса. Я только что добавил это в ветку 2.0.2, так что вам придется использовать Bundler с Git, чтобы установить его, но я надеюсь на релиз в ближайшие пару дней.

Ты прав. Твиттер продвигает здесь ани-паттерн. См. эту статью.

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

Используя boostrap-sass 2.3.2.2 gem, мне пришлось создать свой собственный миксин на основе миксинов bootstrap, чтобы классы CSS действовали как классы bootstrap .span.

// 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;
    }
  }
}

пример:

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