关于Less递归自动网格中@number-cols变量来源的技术咨询

嘿，我来帮你搞清楚这个@number-cols的来头～其实它并不是一个未声明的全局变量，而是混合宏.generate-columns的参数，它的值是在调用这个混合宏的时候传进来的，咱们一步步拆解来看：

第一步：找到调用.generate-columns的地方 #

看你的mixins里的.make-grid混合宏：

.make-grid(@container-width) {
  @media(min-width: @container-width) {
    width: calc(@container-width + 5px);
    .generate-columns(@container-width, @grid-c); // 这里是关键调用
  }
}

这里调用.generate-columns的时候，第二个参数传的是@grid-c，而这个变量在你的Variables部分已经明确定义了：

@grid-c: 12;

第二步：看.generate-columns的参数定义 #

再看.generate-columns的签名：

.generate-columns(@container-width; @number-cols; @i: 1) when (@i <= @number-cols) {
  .col-@{i} { 
    @single-width: @container-width / @number-cols; 
    width: @i * @single-width; 
  }
  .generate-columns(@container-width; @number-cols; @i + 1); // 递归调用
}

这里的第二个参数就是@number-cols，它接收的就是调用时传入的@grid-c的值（也就是12）。

完整流程梳理 #

1. 当.make-grid被调用时（比如.make-grid(@container-xs);），它会在对应的媒体查询里触发.generate-columns，并把@grid-c（值为12）传给@number-cols参数。
2. 在递归过程中，每次调用.generate-columns都会把@number-cols的值（12）传递下去，直到@i超过12时递归停止，最终生成从.col-1到.col-12的所有列样式类。

简单来说，@number-cols是混合宏的局部参数，它的实际值就来自你定义的全局变量@grid-c～

内容的提问来源于stack exchange，提问作者Stormfist