当前位置: 首页 > 文档资料 > Less 简明教程 >

2.12 循环

优质
小牛编辑
132浏览
2023-12-01

在Less中,mixin可以调用它自身。通过这种递归调用,再结合Guard表达式和模式匹配,就可以写出各种循环结构。如,使用循环来创建一个网格类:

.generate-columns(4);
.generate-columns(@n, @i: 1) when (@i =< @n) {
  .column-@{i} {
    width: (@i * 100% / @n);
  }
  .generate-columns(@n, (@i + 1));
}

编译后的CSS代码为:

.column-1 {
  width: 25%;
}
.column-2 {
  width: 50%;
}
.column-3 {
  width: 75%;
}
.column-4 {
  width: 100%;
}