Twitter bootstrap 如何在Bootstrap3中高效地实现BS2.spanX语义？

无论嵌套级别如何，Bootstrap 2中的

.spanX

类的大小始终相同。要在顶层实现这一点，很简单：

// top level .spanX
.generate-level1(@index) when (@index >= 1) {
    .span@{index}   { .make-md-column(@index); }
    .offset@{index} { .make-md-column-offset(@index); }
    .generate-level1(@index - 1);
}
.generate-level1(12);

下一层稍微复杂一些，例如，两个

.span4

相等地分割封装

.span8

的bs2嵌套：

<div class="row">
    <div class="span8">
        <div class="row">
            <div class="span4"></div>
            <div class="span4"></div>
        </div>
    </div>
    <div class="span4"></div>
</div>

我有两个问题

问题1：如何生成级别3（例如

.span8.span4.span2

）

问题2：生成的css非常重复：

普通

.span8

.span8 {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}
@media (min-width: 992px) {
  .span8 {
    float: left;
    width: 66.66666667%;
  }
}

…普通

.span4

.span4 {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}
@media (min-width: 992px) {
  .span4 {
    float: left;
    width: 33.33333333%;
  }
}

。。嵌套

.span8.span4

.span8 .span4 {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}
@media (min-width: 992px) {
  .span8 .span4 {
    float: left;
    width: 50%;
  }
}

---

有没有办法让css不那么冗长/重复？

关于你的Q1，我认为当你想创造所有可能的机会时，你不能避免有很多类。生成所有类也不会使代码更具语义，我认为是这样

但您可以使用列表函数（请参见：）生成语义宽度：

.setwidths(@levels;@width:100%;@level:1;@columns:12) when (length(@levels) >= @level){
.setwidths(@levels;  @width * ( extract(@levels,@level) / @columns ); @level + 1;  extract(@levels,@level));
}
.setwidths(@levels;@width;@level;@columns) when (default()){
width: @width;
}
property {
.setwidths(6 4 2);
}

在上面的

.setwidths（6 4 2）调用设置第三层的宽度（span6>span4>span 2）

第二季度之后：

如果HTML可能包含非语义网格类，则可以使用基类：

.span{
位置：相对位置；
最小高度：1px；
左侧填充：15px；
右侧填充：15px；
}

在HTML中使用：
class=“span{X}”

或者，当您使用
：extend
伪类时，请参见，您应该能够创建一个（长）选择器列表，这些选择器共享相同的属性列表，例如：

.selector {
&:extend(.span);
.setwidths(6 4 2);
}

请注意，属性选择器可以用作基类的替代选项：

[class^="span"], [class*=" span"] {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}

由于性能问题，引导本身避免（部分）属性选择器。另见：

.selector {
&:extend(.span);
.setwidths(6 4 2);
}

[class^="span"], [class*=" span"] {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}