Question

Bootstrap 2（bs2）中的.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);

下一级下来有点复杂，例如bs2嵌套，其中两个.span4平均分割了封闭的.span8：

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

这相当于bs3中的以下内容（其中每行有12个“单位”，无论嵌套级别如何）：

<div class="row">
    <div class="col-md-8">
        <div class="row">
            <div class="col-md-6"></div>
            <div class="col-md-6"></div>
        </div>
    </div>
    <div class="col-md-4"></div>
</div>

.span4中的.span8必须是4 * 12 / 8 = 6，我正在生成这样的内容：

.generate-level2(@parent) when (@parent >= 1) {
    .generate-spans(@child) when (@child >= 1) {
        .span@{parent} .span@{child}   { .make-md-column(12*@child/@parent); }
        .span@{parent} .offset@{child} { .make-md-column-offset(12*@child/@parent); }
        .generate-spans(@child - 1);
    }
    .generate-spans(@parent);
    .generate-level2(@parent - 1);
}
.generate-level2(12);

我有两个问题..

Q1：我如何开始生成3级（例如.span8 .span4 .span2）？

Q2：生成的css非常重复：

普通.span8

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

.. plain .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更简洁/重复？

Answer 1

关于你的Q1，当你想要产生所有可能的机会时，我认为你不能避免参加很多课程。生成所有类也不会使我的代码更具语义性。

但你可以使用list函数（参见：http://lesscss.org/functions/#list-functions）来生成语义宽度：

.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＆gt; span4＆gt; span 2）

比Q2：

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

.span { 位置：相对; 最小高度：1px; padding-left：15px; padding-right：15px; }

在您的HTML中使用

：class="span span{X}"

或当您使用:extend伪类时，请参阅http://lesscss.org/features/#extend-feature，您应该能够创建一个（长）选择器列表，该列表共享相同的属性列表，例如：

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

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

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

由于性能问题，Bootstrap本身避免了（部分）属性选择器。另见：http://benfrain.com/css-performance-revisited-selectors-bloat-expensive-styles/

如何在Bootstrap 3中有效地实现BS2 .spanX语义？

1 个答案: