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

Question

Я довольно новичок в этом, но я не могу понять проблему.

В Twitter начальной загрузке я бы использовал:

<div class="row-fluid">
  <div class="span2">Column1</div>
  <div class="span6">Column2</div>
</div>

И все это прекрасно работает.Но я не хочу писать spanX и spanY непосредственно в мой html-файл, скорее я хотел бы дать значимые имена классов, например:

<div class="user-container">
  <div class="user-filter">First Column</div>
  <div class="user-list">Second Column</div>
</div>

Учитывая тот факт, что я использую https://github.com/thomas-mcdonald/bootstrap-sass, как мне написать свой файл scss?Я пробовал следующее, и оно не работает (два столбца не отображаются):

@import "bootstrap";
@import "bootstrap-responsive";

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

.user-filter {
    @extend .span2;
}

.user-list {
    @extend .span10;
}

Если я смотрю на сгенерированный код, мне кажется, что все должно быть в порядке:

/* line 164, ../../../../../.rvm/gems/ruby-1.9.3-p125/gems/bootstrap-sass-2.0.0/vendor/assets/stylesheets/bootstrap/_mixins.scss */
.span2, .user-filter {
  width: 140px;
}

и т. Д.

Что я делаю не так?

ОБНОВЛЕНИЕ:

хорошо, просто чтобы понять, что это такоенеправильно - столбцы расположены в виде строк (один за другим), а не как настоящие столбцы (один рядом друг с другом), например ::

с начальной загрузкой: Column1 Column2
с моими пользовательскими классами:
Первый столбец
Второй столбец

Я проверил расположение элементов в Chrome, и похоже, что у классов начальной загрузки есть свойство float, а у моего - нет.Глядя на исходники CSS, я вижу такие классы:

[class*="span"] {
  float: left;
  margin-left: 20px;
}

Так что в моем случае я думаю, что это должно сгенерировать что-то вроде: [class * = "user-filter"] {float: left;поле слева: 20 пикселей;}

или нет?

Answer 1

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

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

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

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

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 для его установки, но я надеюсь на выпуск в ближайшие пару дней.

Answer 2

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

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

Answer 3

Используя boostrap-sass 2.3.2.2 gem, мне пришлось создать свой собственный миксины на основе миксинов начальной загрузки, чтобы классы CSS действовали как классы начальной загрузки .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);
  }