How can I loop through h1 - h6 tags and decrease font size with every increment?

Question

i want to decrease the font-size and maybe even the colour (with a loop?). is it possible in LESSCSS? I tried the following and it works but it only decrease the font size by 1 each time - for obvious reasons. is there another way of doing this?

at the moment this:

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

is giving me this:

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

but it's not quite what i'm after. i want the "h" to decrease by one - which it currently does - and the font-size to decrease by - lets say - 5px for every loop.

any ideas?

Answer 1

You already have the hard part. You can multiply in LESS with * So it's pretty easy to adapt your loop however you want. As an example:

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

Compiles down to:

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