less10 loop循环

less

.loop(@counter) when (@counter > 0) {
  .loop((@counter - 1));    // 递归调用自身 4 3 2 1 0
  width: (10px * @counter); // 每次调用时产生的样式代码 50px 40px 30px 20px  10px
}

div {
  .loop(5); // 调用循环
}

.loop1(@counter) when (@counter > 0) {
  h@{counter}{
    padding: (10px * @counter);
  }// 每次调用时产生的样式代码
  .loop1((@counter - 1));    // 递归调用自身
}

div {
  .loop1(6); // 调用循环
}

.loop2(@counter) when (@counter < 7) {
  h@{counter}{
    padding: (10px * @counter);
  }// 每次调用时产生的样式代码
  .loop2((@counter + 1));    // 递归调用自身
}

div {
  .loop2(1); // 调用循环
}

css

div {
  width: 10px;
  width: 20px;
  width: 30px;
  width: 40px;
  width: 50px;
}
div h6 {
  padding: 60px;
}
div h5 {
  padding: 50px;
}
div h4 {
  padding: 40px;
}
div h3 {
  padding: 30px;
}
div h2 {
  padding: 20px;
}
div h1 {
  padding: 10px;
}
div h1 {
  padding: 10px;
}
div h2 {
  padding: 20px;
}
div h3 {
  padding: 30px;
}
div h4 {
  padding: 40px;
}
div h5 {
  padding: 50px;
}
div h6 {
  padding: 60px;
}