when判断渲染

@imgUse: 0;
img when(@imgUse=0) {
    width: 100%;
}

循环(loop)

示例一

循环输出四个 padding 属性：

.loop(@i) when (@i > 0) {
   .loop((@i - 1));    // 递归调用自身
   padding: (10px + 5 * @i); 
 }
 
.call{
   .loop(4); // 调用循环
}

编译成 CSS 代码：

.call {
  padding: 15px;
  padding: 20px;
  padding: 25px;
  padding: 30px;
}

示例二

通过循环创建多个样式类，使用递归循环最常见的情况就是生成栅格系统的CSS

.xkd(@n, @i: 1) when (@i =< @n) {
  .grid@{i} {
    width: (@i * 100% / @n);
  }
  .xkd(@n, (@i + 1));
}

.xkd(5);

编译成 CSS 代码：

.grid1 {
  width: 20%;
}
.grid2 {
  width: 40%;
}
.grid3 {
  width: 60%;
}
.grid4 {
  width: 80%;
}
.grid5 {
  width: 100%;
}