LESS - use nth-child variable in string

css-selectors, less

Solution

#bg-slider {
    li {
        .bkg(1);
        .bkg(2);
        .bkg(3);
    }

    .bkg(@i) {
        &:nth-child(@{i}) {
            background: url('../images/bg@{i}.jpg');
        }
    }
}

Problem

Surely there's a way to rewrite the following in LESS? ``` #bg-slider{ li:nth-child(1){ background:url('../images/bg1.jpg'); } li:nth-child(2){ background:url('../images/bg2.jpg'); } li:nth-child(3){ background:url('../images/bg3.jpg'); } } ``` I've tried: ``` .bg-image (@slide) { background:url('../images/bg@{slide}.jpg'); } #bg-slider{ li:nth-child(n){ .bg-image(n); } } ``` But that just gives '../images/bgn.jpg' for all li's.

Original source