XF 2.0 Looping in less

[Lukas W.]

I'm not that well versed in less. Is there a way to compress the following into a loop? The counter goes from 1 to 30.

.color-code-2 {
    .memberHeader-main {
        background: @xf-klUIUsernameColor2;

        .pairs > dt,
        .username--color-2,
        .kl-ui-username-change-button-wrapper .button.button--link,
        a {
            color: white;
        }
    }

    .block-tabHeader {
        background: @xf-klUIUsernameColor2;
        color: white;
    }

    .block-tabHeader .tabs-tab.is-active {
        color: white;
        border-color: white;
    }
}

.color-code-3 {
    .memberHeader-main {
        background: @xf-klUIUsernameColor3;

        .pairs > dt,
        .username--color-3,
        .kl-ui-username-change-button-wrapper .button.button--link,
        a {
            color: white;
        }
    }

    .block-tabHeader {
        background: @xf-klUIUsernameColor3;
        color: white;
    }

    .block-tabHeader .tabs-tab.is-active {
        color: white;
        border-color: white;
    }
}

 

[Mike]

Given that you're changing style properties, which are compiled at a level above LESS, you couldn't really turn that into a loop, though LESS's looping constructs aren't exactly obvious anyway.

You could either use a mixin, to which you'd pass the number part of the selector and the value of the style property that varies (http://lesscss.org/features/#mixins-parametric-feature) or you can use XF template constructs to define a macro and/or build a loop in that (though obviously that will break syntax highlighting, though it should still output the expected LESS).

 

[Lukas W.]

I wasn't aware that the template syntax works in .less templates! That makes things a lot easier.
Thanks Mike!