用于在Twitter中生成列类的LESS循环-它们如何工作？

Question

Bootstrap使用一些LESS mixin生成它的列类（以及其他几个类）；

.make-grid-columns() {
  // Common styles for all sizes of grid columns, widths 1-12
  .col(@index) when (@index = 1) { // initial
    @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
    .col((@index + 1), @item);
  }
  .col(@index, @list) when (@index =< @grid-columns) { // general; "=<" isn't a typo
    @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
    .col((@index + 1), ~"@{list}, @{item}");
  }
  .col(@index, @list) when (@index > @grid-columns) { // terminal
    @{list} {
      position: relative;
      // Prevent columns from collapsing when empty
      min-height: 1px;
      // Inner gutter via padding
      padding-left:  (@grid-gutter-width / 2);
      padding-right: (@grid-gutter-width / 2);
    }
  }
  .col(1); // kickstart it
}

我可以看到LESS mixin防护用于创建循环，并且我可以理解LESS文档中给出的代码示例；

.loop(@counter) when (@counter > 0) {
  .loop((@counter - 1));    // next iteration
  width: (10px * @counter); // code for each iteration
}

div {
  .loop(5); // launch the loop
}

但是我似乎无法完全理解引导程序使用的更复杂的嵌套保护表达式如何工作。 有人可以更详细地评论上面的引导程序代码，以指示我发生了什么吗？

Answer 1

.make-grid-columns() mixin的目的是生成一长列的选择器，这些选择器均具有相同的属性。 由于列数（ @grid-columns ）可能有所不同，因此该列表不能是代码中的硬代码。

您已经在问题中的Less中演示了循环的基础。

要了解mixin，您必须了解Less允许您多次使用相同的mixin名称。 每个“匹配”的mixins将被编译为CSS代码。 when ()使您能够为比赛设置条件when () Mixin保护卫兵。 当防护不匹配时，将不编译mixin。 除了mixins防护之外，您还可以使用模式匹配，然后可以按如下所示对值进行匹配：

.mixin1(a,@width){}
.mixin1(b,@width){}

.mixin(a,20px); 通话只匹配第一个mixin。 基于稀疏度（参数数量）的部分匹配也将起作用。 请注意， .col(@index) when (@index = 1)不需要保护（ 另请参见 ）。 .col(@index)调用只有一个参数，因此.col(1); 仅根据Arity匹配来匹配该mixin。 .col(@index)混合调用.col(@index, @list)混合。 .col(@index) when (@index = 1) mixin .col(@index) when (@index = 1)的.col(@index) when (@index = 1)仅在第一次迭代时调用。 拥有两个mixins而不是一个的原因是Less不支持if / else。 选择器列表不能以逗号开头或结尾，因此选择器列表中的第一项或最后一项应与其他项不同。

或者，您可以将mixin与其他参数一起使用：

.mixin(@iterator; @item:~""; @seperator:~"") when (@iterator < 5){
@list: ~"@{item} @{seperator} @{iterator}";
.mixin((@iterator + 1); @list; ",");
}
.mixin(@iterator; @list; @seperator) when (@iterator = 5){
.selector{
@{list}: value;
}
}
.mixin(1);

对于第一个调用，@ seperator将为空（ ~"" ），对于所有其他调用","将为逗号（ "," ）。 注意，具有默认参数的混合也匹配没有默认值设置的调用：So .call(1); 与.call(@a; @b:4; @c:5){}匹配。

如注释~"@{list}, @{item}"所述，它通过字符串串联生成选择器列表。

.col(@index, @list) when (@index =< @grid-columns)调用col((@grid-columns + 1)....) mixin时.col(@index, @list) when (@index =< @grid-columns)的最后一次迭代@index=@grid-columns和因此在结构中.col(@index, @list) when (@index > @grid-columns) mixin .col(@index, @list) when (@index > @grid-columns)匹配最后一个.col(@index, @list) when (@index > @grid-columns) 。

@{list} { }使用选择器插值设置选择器列表及其属性。

当然，您还应该阅读有关该结构的@ seven-phases-max 优秀博客文章 ，以生成选择器列表。

最后，您应该知道Bootstrap需要这么长的选择器列表，因为它避免了（部分）属性选择器。 除了选择器列表，您还可以使用以下CSS / Less代码：

[class^="col-"], [class*=" col-"]
{
      position: relative;
      // Prevent columns from collapsing when empty
      min-height: 1px;
      // Inner gutter via padding
      padding-left:  (@grid-gutter-width / 2);
      padding-right: (@grid-gutter-width / 2);
}

避免使用属性选择器的原因是某些浏览器计算速度较慢。 如http://benfrain.com/css-performance-revisited-selectors-bloat-expensive-styles/所示 ，您可以忽略此参数。 我个人认为，与大多数Bootstrap项目中使用属性选择器相比，未使用的代码是更重要的性能问题。