兄弟インデックスに基づいて位置を変更するミックスインまたはセレクタが少ない

Question

私はいくつかの兄弟divの位置を、それらの兄弟に基づいて調整しようとしています。現在、彼らはすべてposition: absoluteですが、それは石で設定されていません。

彼らはそれぞれ数百ピクセルの高さですが、私はそれらを数ピクセルだけ正面のものの上に "覗く"の後ろにあるように、お互いに重なるようにします。私が考えることができる最も簡単な方法は、nth-of-typeのLess mixinで、一致する1つのインデックスにルールを適用するのではなく、インデックスをmixinに渡します。私は現在やっている：

&:nth-of-type(@n) { 
    top: @n * 20px; 
} 

編集：基本的に、私はこれをしたい

&:nth-of-type(1) { 
    .card_offset(1); 
} 
&:nth-of-type(2) { 
    .card_offset(2); 
} 
&:nth-of-type(3) { 
    .card_offset(3); 
} 
&:nth-of-type(4) { 
    .card_offset(4); 
} 

は明らかに、これは最適ではないです。 Lessでこれを行う良い方法はありますか？

また、'layout-height'のようなCSSフィールドがあり、divに特定の高さ（高さではない）がレイアウトに与えられますか？

Answer 1

あなたが前もって要素の数を知っているとか（あるいは、どうにかしてあなたのCSSを再計算していると仮定して）、元々here on stack overflowを発見したput into a loop structureの場合は、

LESSコード

.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); 
} 

出力

.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; 
} 

Answer 2

私はこれが可能であるという方法が表示されません。かなりクールだろうが、私はそれがjavascriptのためだと思います。 http://jsfiddle.net/VbuQ9/

したい場合は、ここでLESSバイオリンで遊ぶことができます。

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

ここで完全なjsのソリューションです。 http://jsfiddle.net/hV8sX/1/