Less Mixin Or Selector To Change Position Based On Sibling Index?

I'm trying to adjust the position of several sibling divs based on which sibling they are. Currently, they're all position: absolute, but that's not set in stone. They are each a f

Solution 1:

Assuming you know the number of elements in advance (or are recalculating your css on the fly somehow), then essentially what you have works if put into a loop structure which I originally discovered here on stack overflow.

LESS Code

.loop(@index) when (@index > 0) {
     //set top amount&:nth-of-type(@{index}) { //NOTE: 1.3.3 and under is just @index, not @{index}top: @index * 20px;
    }

     // next iteration.loop(@index - 1);
}

// end the loop when index is 0.loop(0) {}

.yourElem {
    @n:6; //num of elements (could skip this and just put number in).loop(@n);
}

Outputs

.yourElem:nth-of-type(6) {
  top: 120px;
}
.yourElem:nth-of-type(5) {
  top: 100px;
}
.yourElem:nth-of-type(4) {
  top: 80px;
}
.yourElem:nth-of-type(3) {
  top: 60px;
}
.yourElem:nth-of-type(2) {
  top: 40px;
}
.yourElem:nth-of-type(1) {
  top: 20px;
}

Solution 2:

I don't see a way that this is possible. Would be pretty cool, but I guess that's what javascript is for.

$('.parentDiv').children('div').each(function() {
    $(this).css({"top": num * 20 + "px"});
    num = num + 1;
});

Here's the full js solution: http://jsfiddle.net/VbuQ9/

You can play around with the LESS fiddle here if you want. http://jsfiddle.net/hV8sX/1/