html - 更少的 mixin 或选择器根据兄弟索引改变位置？

Question

我正在尝试根据它们是哪个同级来调整几个同级 div 的位置。目前，它们都是 position: absolute，但这并不是一成不变的。

它们每个都有几百个像素高，但我希望它们相互重叠，以便后面的那些只比前面的那些高出几个像素。我能想到的最简单的方法是 nth-of-type 的 Less mixin，它不是只将规则应用于匹配的一个索引，而是将索引传递到 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)，那么如果 put into a loop structure，您所拥有的基本上是有效的我最初发现的 here on stack overflow .

更少的代码

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