css - 更少的递归自动网格

Question

你好，我找到了一段代码，用于用 .less 编写的递归自动网格，我需要澄清一下。这段代码工作正常。大多数情况下，我需要说明 @number-cols 从哪里得到这个变量，如果没有说明，其余的代码我基本上都能理解？

少

主要

 .container {

.container-fixed();

[class*='col-'] {

    float: right;
    width: 100%;
}

.make-grid(@container-xs);
.make-grid(@container-sm);
.make-grid(@container-md);
.make-grid(@container-lg);
}

混合

.container-fixed(@gutter: @grid-gutter-width) {

 margin-right: auto;
 margin-left: auto;
 padding-left: (@gutter / 2);
 padding-right: (@gutter / 2);
}

 .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);
 }

  .make-grid(@container-width) {

  @media(min-width: @container-width) {

  width: calc(@container-width + 5px);

.generate-columns(@container-width, @grid-c);
 }
 }

变量

  @grid-c:          12;
  @grid-gutter-width:   30px;

  @container-xs:                ((480px + @grid-gutter-width));
  @container-sm:                ((720px + @grid-gutter-width));
  @container-md:                ((940px + @grid-gutter-width));
  @container-lg:                ((1140px + @grid-gutter-width));

Answer 1

@number-cols 是 mixin 声明的一部分。

第一次看到.generate-columns是mixin的声明。

然后您稍后在 .make-grid 中“调用”mixin。

你用'Main'中提供的变量'make-grid'，例如; .make-grid(@container-xs); 并在该调用中调用 .generate-columns 使用 @grid-c 作为值(value)。

@number-cols 只是一个参数，@grid-c 是一个参数。