用於在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項目中使用屬性選擇器相比，未使用的代碼是更重要的性能問題。