css - 如何循环遍历 h1 - h6 标签并随着每个增量减小字体大小？

Question

我想减小字体大小甚至颜色（带循环？）。LESSCSS 有可能吗？我尝试了以下方法，它可以工作，但每次只会将字体大小减小 1 - 原因很明显。还有另一种方法吗？

目前：

 @iterations: 6;
  h(@index) when (@index > 0) {
    (~"h@{index}") {
        font-size: 21px - @index;
    }
    h(@index - 1);
  }
  h(0) {}
  h(@iterations);

给我这个：

 h6 { font-size:15px; }
 h5 { font-size:16px; }
 h4 { font-size:17px; }
 h3 { font-size:18px; }
 h2 { font-size:19px; }
 h1 { font-size:20px; } 

但这不是我所追求的。我希望“h”减少一 - 它目前正在做 - 并且字体大小减少 - 让我们说 - 每个循环减少 5px。

有任何想法吗？

Answer 1

你已经有了困难的部分。您可以在 LESS 中乘以*所以很容易根据需要调整循环。举个例子：

@iterations: 6;
h(@index) when (@index > 0) {
    (~"h@{index}") {
        font-size: 40px - @index*5;
    }
    h(@index - 1);
}
h(0) {}
h(@iterations);

编译为：

h6 { font-size:10px; }
h5 { font-size:15px; }
h4 { font-size:20px; }
h3 { font-size:25px; }
h2 { font-size:30px; }
h1 { font-size:35px; }