0

As a LESS-newbie, I'm puzzled by the parser's behaviour on a particular piece of code.

I'm following a course that teaches me to enter this code in my LESS-file and parse it:

.lusGuardedMixin (@index) when (@index > 0) {
    @waarde: -((38*@index)-38);

    .m_item@{index} {
        background-position: ~"@{waarde}px" 0;

        &:hover {
            background-position: ~"@{waarde}px" -39px;
        }

        & span {
            .menuspan(~"bgcolor_@{index}", ~"color_@{index}", ~"tshadow_@{index}")
        }
    }
    .lusGuardedMixin(@index + 1);

}
.lusGuardedMixin(6) {}
.lusGuardedMixin(1);

You can ignore the ".menuspan"-part, that refers to a piece of code that is not relevant here.

Now, when running this code in WinLESS, it creates a parser error: "SYNTAR ERROR: undefined", then refers to the line where i stated:

.lusGuardedMixin(1);

I tried all kinds of things - like changing the starting number -, but keeping the LESS-documentation (and its example for recursion) in mind, I eventually changed part of the code to:

[...]
     .lusGuardedMixin(@index - 1);

}
.lusGuardedMixin(0) // this is no longer explicitly necessary due to the restriction "> 0", but is still here for reference of changes I did try
.lusGuardedMixin(5);

And now it works! But I don't know why... What makes the increment (@index + 1) fail, but the decrement (@index - 1) work in this piece of code?

Note: I also managed to solve it using the original counter increment by replacing the original loop conditionwhen (@index > 0) with when (@index > 0) and (@index < 6), but then I still can't see why the original example won't work.

Thanks in advance for your help :)

roochitect
  • 1
  • It's just because you have `when (@index > 0)` as you mixin guard. So when you increment the index the loop just never ends. (note that `.lusGuardedMixin(6) {}` definition can't stop the loop, it's invoked when `index=6` but the default mixin definition is invoked as well so the loop continues). What you need is to simply change the guard to `when (@index < 6)` (you *don't* need `(@index > 0)` at all since you start with `1` anyway). In fact the real question is "Why do you think you original example should work?" :) – seven-phases-max Jul 02 '14 at 14:08
  • Just in case there're a lot of common pitfalls in this snippet beside the loop: [1]. Don't emulate lists/arrays with variable name concatenation - use native Less lists instead (see [1](http://stackoverflow.com/questions/24492770/24494609#comment37924880_24492770), [2](http://stackoverflow.com/questions/21941983/), [3](http://lesscss.org/functions/#list-functions)). [2]. Don't use string concatenation for appending a unit to a number (`unit` function should be used instead, but for the particular example you don't need even `unit`, just set the unit in `@waarde: -(38px * @index - 38);`). – seven-phases-max Jul 02 '14 at 14:22
  • And getting back to the loop: see [this example](https://gist.github.com/seven-phases-max/a5332d9c6eec58ba14b7#file-loop-in-reverse-less) (basically it's the same as the first example in the [docs](http://lesscss.org/features/#loops-feature) just with more comments) to see how to make the loop work in forward direction while still using decreased index (that way the implementation is just a bit more compact than "increased index" is since you don't have to specify both start and end indices). It's useful when you don't need the last-index/n-of-iterations value inside the loop itself. – seven-phases-max Jul 02 '14 at 14:48
  • thanks for the answers :) well, the reason(s) I thought it would work, besides some reservations I had, was that a) I didn't know anything specific about Less and b) this example came linea recta out of a course specifically intent on teaching Less. Considering your answers (and considering I already had to change 2 things besides this problem that created errors by themselves), I'm guessing the course kinda sucks :p – roochitect Jul 02 '14 at 18:41
  • >the course kinda sucks - I was thinking to say something like this too, but to be fair it actually may be just too outdated (indeed that "string interpolation/concatenation" method was the only way to get things done a few years ago. And proper "native lists" support has came only about half a year ago: i.e. `length` function you can't loop through a list without). – seven-phases-max Jul 02 '14 at 18:58

0 Answers0