Nikita Söze Nikita Söze - 7 months ago 72
Less Question

Using less variable inside css `&:nth-child(3n)`

I'm using Less, Gulp and Webpack. I have a variable in my

.less
file:

@rows: 3;


Now I want to use it here:

&:nth-child(@rows n) {
margin-right: 0;
}


But the gulp breaks. Is there a way to make use of variables here with less?

Thanks!

Answer Source

I'm not using less myself, but I think that your're doing it wrong.

What you write would output

.myClass:nth-child(3 n){};

If you want to output .myClass:nth-child(3n){}; you should write:

.myClass:nth-child(@{row}n) {
    margin-right: 0;
}

This way, your variable will be right next to your n.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download