时间戳

首页 > 解决方案 > 较少递归的自动网格

css - 较少递归的自动网格

问题描述

您好，我找到了一段代码，用于用 .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));

标签： cssless

解决方案

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

推荐阅读