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

尝试用变量@ grid-c替换@ number-cols。似乎@ number-cols被定义为变量而@ grid-c似乎是列变量。希望这对你有所帮助。

Answer 2

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

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

然后你打电话给＆＃39; mixin稍后，在.make-grid内。

你制作网格＆＃39;使用提供的变量在＆＃39; Main＆＃39;例如; .make-grid(@container-xs);在该通话中，它使用.generate-columns作为值来调用@grid-c。

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

减少递归的自动网格

2 个答案: