LESS CSS nested loops for header elements

Question

first post,

My question is this,

Is it possible to do a less loop for iterated elements (rather than iterated classes/ids) and if so what am I doing wrong and how would I do it otherwise?

.generate-columns(4);

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

Above is the example generic loop show on the less features page, It's really interesting I feel so I wondered what circumstance I could use it for. I thought that autogenerating header element fontsizes for different header sizes would be perfect; below is my attempt

.headers-generator(6);

.headers-generator(@n, @i : 1) when (@i =< @n)
{
    h@{i}{
        font-size: (2em - ((@i - 1) * 0.2)em);
    }
        .headers-generator(@n, (@i + 1));
}

Below is the expected output

h1
{
    font-size: 2em;
}
h2
{
    font-size: 1.8em;
}
h3
{
    font-size: 1.6em;
}
h4
{
    font-size: 1.4em;
}
h5
{
    font-size: 1.2em;
}
h6
{
    font-size: 1em;
}

I am using Visual Studio 2012 and Web Essentials, Web Essentials' error for this LESS is "missing a colon between property and value" and it also tells me that the @i and @n inside the curly brackets are "undeclared".

Input much appreciated.

Have you got the latest version of Web Essentials 2012? Sounds to me like you are using an older version of LESS that does not support property interpolation (needs to be less 1.6 and above) — Colin Bacon
– Colin Bacon, Commented Jun 9, 2014 at 15:19
I am worried it is a Web Essentials issue, I have updated Web Essentials as far as visual studio deems is up to date. Is it likely that web essentials would update without informing VS? I have on previous occasions been prompted by visual studio to update. I have just checked Tools/Extensions and Updates/ in the "installed" and "Updates" sections but there appears to be no newer version, nor does W.E.s web site say the version of LESS. — MerlynCooper
– MerlynCooper, Commented Jun 9, 2014 at 15:41
The changelog states that LESS 1.6.3 is used in the latest version (3.7) vswebessentials.com/changelog — Colin Bacon
– Colin Bacon, Commented Jun 9, 2014 at 15:53
Well colour me impressed, I should have seen the change log. I'll uninstall and reinstall Web Essentials and get back to you. — MerlynCooper
– MerlynCooper, Commented Jun 9, 2014 at 15:59
reinstalled via VS and reinstalled by downloading it from the website just encase they're different release versions, errors remain the same. — MerlynCooper
– MerlynCooper, Commented Jun 9, 2014 at 16:10

Rene Korss · Accepted Answer · 2016-06-08 07:51:08Z

2

This mixin will work in LESS 1.6+. The em at the end of the font-size calculation was kicking up an error and is not necessary as em units are already being used in the calculation.

.headers-generator(@n; @i : 1) when (@i =< @n)
{
  h@{i} {
    font-size: (2em - (@i - 1) * 0.2);    
  }

  .headers-generator(@n; (@i + 1));
}

.headers-generator(6);

edited Jun 8, 2016 at 7:51

Rene Korss

5,4943 gold badges33 silver badges39 bronze badges

answered Jun 9, 2014 at 16:03

Colin Bacon

15.6k8 gold badges56 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

MerlynCooper Over a year ago

That worked perfectly thank you, annoying/reassuring to know it was only "em" wrong.

seven-phases-max Over a year ago

Just in case there's no "property interpolation" in this code. Selector interpolation (with given syntax) is supported since v1.4.x.

Collectives™ on Stack Overflow

LESS CSS nested loops for header elements

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related