Less 在栅格布局中的应用

首先，我们先来看下什么是栅格布局。

Vant Layout布局的代码实现：

<van-row>
  <van-col span="8">span: 8</van-col>
  <van-col span="8">span: 8</van-col>
  <van-col span="8">span: 8</van-col>
</van-row>

想必我们都已经很熟悉了。我们将页面分成了24等分，按比例设置col的宽度。这里的8也就是width:33.3333%。

Less 函数配合Loop实现

.generate-col(24);

// 从1循环到24 
.generate-col(@n, @i: 1) when (@i =< @n) {
  .van-col--@{i} {
    width: @i * 100% / 24;
  }

  .van-col--offset-@{i} {
    margin-left: @i * 100% / 24;
  }

  .generate-col(@n, (@i + 1));
}