Space in less loop

Question

I have this :

.loop(@index) when(@index =< @to) {
    .page-@{index} {
        nav{
            ul{
                li:nth-child(@{index}){
                    background:#fff;
                }
            }
        }
    }
    .loop(@index + 1);
}

It seems to have a problem, because the output of my css is :

ul li:nth-child( 2) {
  background: #fff;
}
ul li:nth-child( 3) {
  background: #fff;
}

it creates a space in the pseudo selector and it doesn't work. Any ideas to remove this space ? Thanks

Answer 1

It's a bug. A workaround is to set the identifier via temporary variable, e.g.:

ul {
    @li: ~"li:nth-child(@{index})";
    @{li} {
        background: #fff;
    }
}