13

我对此很陌生，但我无法弄清楚问题所在。

在 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 中的元素布局，似乎引导类具有浮动属性，而我的 - 没有。查看 css 源，我看到这样的类：

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

所以在我的情况下，我认为它应该生成类似： [class*="user-filter"] { float: left; 左边距：20px；}

或不？

4

3 回答 3

19

这是您使用@extend，或者更确切地说，Sass 无法处理通配符类匹配，这并不奇怪，因为它变得相当复杂。

Bootstrap 使用了一些我可能称之为“非标准”的方法来处理某些类。您在上面的帖子中提到了其中之一- [class*="span"]。

自然，当您使用 时@extend x，Sass 正在扩展x该类。不幸的是，它（目前）无法知道通配符匹配器也会影响类的输出。所以是的，在理想的世界中，[class*="span"]也可以扩展到定义[class*="span"], .user-filter，但 Sass 目前不能这样做。

虽然扩展.row-fluid足以包含嵌套在它下面的规则。跨度类，如上所述，它不会调整扩展跨度的通配符。

bootstrap-sass 已经有一个用于固定宽度列/行的 mixin，makeRow()并且makeColumn(). 我刚刚推出了一个makeFluidColumn()mixin，它产生了一个流畅的跨度。您的代码将变为：

.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，因此我们必须在任何将成为流动行的第一个子元素的元素上手动设置 no 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 来安装它，但我希望在接下来的几天内发布。

于 2012-03-28T14:28:33.033 回答
4

你说的对。Twitter 正在这里推动一个 ani-patter。见这篇文章。

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

于 2012-06-16T23:51:35.273 回答
0

使用boostrap-sass 2.3.2.2gem，我必须基于 bootstrap 的 mixin 创建自己的 mixin，以使 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);
  }
于 2014-10-29T09:39:55.237 回答