Question

我们更喜欢像这样划分可用空间的网格：

grid-1 = 100％
grid-2 = 50％
grid-3 = 33.33333333％

我们有以下较少的mixin，除了grid-1应该等于100％之外，效果很好;

@column-gutter-width: 2%;

.grid {
  margin-left: -@column-gutter-width;
  .clearfix();

  .generate-grid-units(@i) when (@i > 0){
    .grid-@{i} {
      width: (100% / @i) - @column-gutter-width;
      margin-left: @column-gutter-width;
    }
    .generate-grid-units((@i - 1));
  }
  .generate-grid-units(6);
}

这会生成以下内容：唯一不正确的单位是grid-1：

.grid .grid-2 {
  width: 48%;
  margin-left: 2%;
}
.grid .grid-1 {
  width: 98%;
  margin-left: 2%;
}

我们如何改变数学，使grid-1 = 100％，但其他网格单位保持不变？

非常感谢任何帮助。

干杯

Answer 1

您可以尝试以下方法：

@column-gutter-width: 2%;
@num-columns: 6;

.grid {
  margin-left: -@column-gutter-width;
  .clearfix();

  .generate-grid-units(@i) when (@i > 1){
    .grid-@{i} {
      width: ((100% / @i) - @column-gutter-width);
      margin-left: @column-gutter-width;

      &:first-child {
        margin-left: 0;
      }
    }
    .generate-grid-units((@i - 1));
  }
  .generate-grid-units(@num-columns);
  .grid-1 {
    width:100%;
  }
}

澄清：

循环仅在@i > 1
.grid-1已手动设置
@num-columns实际上用于生成网格
width: ((100% / @i) - @column-gutter-width);现在输出最终值而不是表达式

有没有办法创建一个less mixin来计算一个划分可用空间的网格？

1 个答案: