Question

I had a look at twitter bootstrap mixin.less where they generate the grid. There’s this line of code:

.offsetX (@index) when (@index > 0) {
  (~".offset@{index}") { .offset(@index); }
  .offsetX(@index - 1);
}
.offsetX (0) {}

Does anyone know what does that .offsetX (0) for?

Answer 1

Since .offsetX (@index) is recursive when the index is greater than 0, and iterates by subtraction, this case represents the terminal point of the recursive function.

If you set @index to 12, it will write .offset12, .offset11,..., .offset1 and write nothing for .offset0.

Edit

As the preprocessor attempts to resolve the mixin call for .offsetX (0), the when keyword is going to guard against using the recursive mixin. If another mixin isn’t found, an error will result, sort of like calling an undefined function.

Hence, the terminating case of .offset (0) {} is there to cleanly exit the recursion.

If you’d like to play with it, here’s a basic demo with which you can try commenting out the line with the terminal case, and then observe the exception on rerunning.

JSFiddle