CODEWITHSUNDEEP
cssloopstwitter-bootstrap-3gruntjsless
Alex P
Alex P

Reputation: 63

LESS Loop error when using Grunt + Bootstrap 3

This is my loop:

@loop-start: 1;
@loop-end: 20;
.loop(@n, @i) when (@n =< @loop-end) {
  .testi-square:nth-of-type(@{n}) {order: (@i);}
  .testi-square:nth-of-type(@{n + 1}) {order: (@i + 1);}
  .testi-square:nth-of-type(@{n + 2}) {order: (@i + 2);}

  .loop((@n + 3), (@i + 6)); // next iteration
}
.loop(@loop-start, @loop-start); // launch the loop

And this is the error I get:

Running "less:compileThemeWeb" (less) task
ParseError: Missing closing ')' in less/theme-web.less on line 3630, column 29:
3629   .testi-square:nth-of-type(@{n}) {order: (@i);}
3630   .testi-square:nth-of-type(@{n + 1}) {order: (@i + 1);}
3631   .testi-square:nth-of-type(@{n + 2}) {order: (@i + 2);}
Warning: Error compiling less/theme-web.less Use --force to continue.

Aborted due to warnings.

I'm using the latest Bootstrap to create my theme. I've been using this for the past 6 months with no issues, I doubt the version of LESS is too old. Not sure how to resolve the issue, seems like a syntax thing but not sure. Been staring at http://lesscss.org/features/#loops-feature all day and scouring the internet but no dice.

Upvotes: 1

Views: 66

Answers (1)

Harry
Harry

Reputation: 89750

The error is because of the following lines:

.testi-square:nth-of-type(@{n + 1}) {order: (@i + 1);}
.testi-square:nth-of-type(@{n + 2}) {order: (@i + 2);}

When the compiler encounters the @{n + 1}, it would be looking for a variable named n + 1. You don't have any such variables named n + 1 (and it is not valid syntax either). So, it would result in compilation error. The fix would be to use something like this:

@loop-start: 1;
@loop-end: 20;
.loop(@n, @i) when (@n =< @loop-end) {
  .testi-square:nth-of-type(@{n}) {order: (@i);}
  @temp: @n + 1;
  .testi-square:nth-of-type(@{temp}) {order: (@i + 1);}
  @temp2: @n + 2;
  .testi-square:nth-of-type(@{temp2}) {order: (@i + 2);}

  .loop((@n + 3), (@i + 6)); // next iteration
}
.loop(@loop-start, @loop-start); // launch the loop

As stated by seven-phases-max in his comment, we can't use expressions, function calls etc within selector interpolation. Only variables are allowed.

Upvotes: 2

Related Questions