用于在 twitter 中生成列类的 LESS 循环 - 它们是如何工作的? [英] LESS loops used to generate column classes in twitter - How do they work?

问题描述

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

Bootstrap uses some LESS mixins to generate it's column classes (and several other classes);

.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 文档;

I can see that LESS mixin guards are being used to create loops, and I can understand the code examples that are given in the 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
}

但我似乎无法确切理解引导程序使用的更复杂的嵌套保护表达式是如何工作的.有人可以更详细地评论上述引导程序代码，让我了解发生了什么吗?

But I can't seem to grok exactly how the more complex nested guard expressions that bootstrap uses are working. Could somebody comment the above bootstrap code in a bit more detail to give me an indication of what is going on?

推荐答案

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

The purpose of the .make-grid-columns() mixin is to generate a long list of selectors which all share the same properties. This list can not be hard code in the code because of the number of columns (@grid-columns) may vary.

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

You already illustrated the basics of a loop in Less in the question yourself.

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

To understand the mixins you will have to understand Less allows you the use the same mixin name many times. Every 'matching' mixins will be compiled into the CSS code. Mixin guards when () enable you to set a condition for the match. When the guard not match the mixin is not compiled. Beside mixins guards you can also use pattern matching, than you can match on value as follows:

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

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

The .mixin(a,20px); call match only the first mixin. Partern matching based on arity (the number of arguments) will also works. Notice that .col(@index) when (@index = 1) does not need a guard (see also). the .col(@index) call has only one argument, so the .col(1); only matches that mixin based on arity matching. The .col(@index) mixin calls the .col(@index, @list) mixin(s). The .col(@index) when (@index = 1) mixin will be only called for the first iteration. The reason for having two mixins in stead of one is that Less don't support if / else. The list of selectors can not start or end with a comma and so the first or last item in the list of selectors should differ from the others.

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

Alternatively you can use a mixin with an additional argument:

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

The @seperator will be empty (~"") for the first call and a comma (",") for all other calls. Notice that a mixin with default parameters also match calls which not having set values for the defaults: So .call(1); matches the .call(@a; @b:4; @c:5){} mixin.

正如评论中已经提到的~"@{list}, @{item}" 通过字符串连接生成选择器列表.

As already mentioned in the comments ~"@{list}, @{item}" generates the selector list via string concatenation.

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

The last iteration of .col(@index, @list) when (@index =< @grid-columns) calls col((@grid-columns + 1)....) mixin when @index=@grid-columns and so matches the last .col(@index, @list) when (@index > @grid-columns) mixin in the structure.

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

@{list} { } use selector interpolation to set the list of selectors and his properties.

当然你也应该阅读优秀@seven-phases-max 的博客文章 关于此结构以生成选择器列表.

Of course you should also read the excellent blog post of @seven-phases-max about this structure to generate a list of selectors.

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

Finally you should know that Bootstrap needs such a long list of selectors because of it avoid (partial) attribute selectors. In stead of the selector list you can also use the following CSS / Less code:

[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 项目中，与使用属性选择器相比，未使用的代码是一个更重要的性能问题.

The reason to avoid attribute selectors is that some browsers compute them slow. As can be seen at http://benfrain.com/css-performance-revisited-selectors-bloat-expensive-styles/, you can discuse this argument. Personally i think that unused code is a more important performance issue than the use of attribute selectors in most Bootstrap projects.

这篇关于用于在 twitter 中生成列类的 LESS 循环 - 它们是如何工作的?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！