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

Question

Bootstrap 使用一些 LESS mixin 来生成它的 column类(和其他几个类)；

.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 guards被用来创建循环，我可以理解 LESS documentation 中给出的代码示例;

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

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

但我似乎无法理解 bootstrap 使用的更复杂的嵌套保护表达式是如何工作的。有人可以更详细地评论上面的 Bootstrap 代码，让我知道发生了什么吗？

Answer 1

.make-grid-columns() 的目的mixin 是生成一长串选择器，它们都共享相同的属性。由于列数 (@grid-columns) 可能会有所不同，因此该列表不能在代码中进行硬编码。

您已经在问题中说明了 Less 循环的基础知识。

要了解 mixin，您必须了解 Less 允许您多次使用相同的 mixin 名称。每个“匹配”的 mixin 都将被编译到 CSS 代码中。Mixin 守卫when ()使您能够设置匹配条件。当守卫不匹配时，mixin 不会被编译。除了 mixins 守卫，你还可以使用模式匹配，你可以按如下方式匹配值:

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

.mixin(a,20px);调用只匹配第一个 mixin。基于 arity(参数的数量)的 Partern 匹配将也有效。注意 .col(@index) when (@index = 1)不需要守卫(see also)。.col(@index)调用只有一个参数，所以 .col(1);仅根据元数匹配匹配该 mixin。.col(@index) mixin 调用 .col(@index, @list)混音。 .col(@index) when (@index = 1) mixin 只会在第一次迭代时被调用。使用两个而不是一个混合的原因是 Less 不支持 if/else。选择器列表不能以逗号开头或结尾，因此选择器列表中的第一项或最后一项应与其他项不同。

或者，您可以使用带有附加参数的混合:

.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 将为空 (~"")，对于所有其他调用，@seperator 将为空 (",")。请注意，具有默认参数的 mixin 也匹配没有设置默认值的调用:所以.call(1);匹配 .call(@a; @b:4; @c:5){}混合。

如评论中所述~"@{list}, @{item}"通过字符串连接生成选择器列表。

.col(@index, @list) when (@index =< @grid-columns) 的最后一次迭代电话 col((@grid-columns + 1)....)当 @index=@grid-columns 时混入所以匹配最后一个 .col(@index, @list) when (@index > @grid-columns)在结构中混入。

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

当然你也应该阅读 excellent blog post @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 元素中，未使用的代码是一个比使用属性选择器更重要的性能问题。