Increase a variable in Less - less

Question

Is it possible to increase a variable in Less?
#i: 0;
.one { border: #i++; }
.two { border: #i++; }
.tree { border: #i++; }
or perhaps using mixins in a way, like
.increase() {
#i: #i+1;
#increase: #i;
}
To better explain the problem:
#icon_width: 32px;
.social{
background: url('snippet_with_n_images');
.facebook: background-position-x: -#icon_width*0;
.twitter: background-position-x: -#icon_width*1;
.googlep: background-position-x: -#icon_width*2;
...
.pinterest: background-position-x: -#icon_width*(n-1);
.linkedin: background-position-x: -#icon_width*n;
/*be replaced by */
.next(): {
background-position-x: -#icon_width*#i++;
}
.facebook: .next();
.twitter: .next();
.googlep: .next();
...
.pinterest: .next();
.linkedin: .next();
}

Answer 1

Simply speaking, it is not possible to increment the same variable without using a loop (mixin) in Less. This is because Less does lazy loading of variables and so the multiple increments result in recursive definition error. The following snippet:
#i: 0;
.one { #i: #i + 1; border: #i; }
.two { #i: #i + 1; border: #i; }
.three { #i: #i + 1; border: #i; }
when compiled would give:
NameError: Recursive variable definition for #i on line 4, column 7:
Using a mixin like in question (.increase()) would still result in the same error as provided above.
The best way to increment would be to make use of mixin loops. For the modified sample provided in the question, the loop should be like below:
#icon_width: 32px;
#social-networks: facebook, twitter, googlep, pinterest, linkedin; /* an array with list of networks */
.social{
background: url('snippet_with_n_images');
.loop-social(1); /* call loop with initial value as 1 */
}
.loop-social(#index) when (#index < length(#social-networks)){ /* iterate till index is less than array length */
#social-network: extract(#social-networks, #index); /* extract value corresponding to index from array */
.#{social-network}{ /* use extracted social network value as selector */
background-position-x: -#icon_width*#index; /* assign calculated value, the index would incremented for each iteration */
}
.loop-social(#index + 1); /* call next iteration with incremented value */
}
The above Less code when compiled would produce the following CSS:
.social {
background: url('snippet_with_n_images');
}
.social .facebook {
background-position-x: -32px;
}
.social .twitter {
background-position-x: -64px;
}
.social .googlep {
background-position-x: -96px;
}
.social .pinterest {
background-position-x: -128px;
}