更少的混合或选择器来改变基于同胞索引的位置？ [英] less mixin or selector to change position based on sibling index?

问题描述

我试图调整几个兄弟div的位置，基于它们的兄弟。目前，他们都位置：绝对，但这不是石头。

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.

100像素高，但我想让他们彼此重叠，以便只有偷看在前面的几个像素的前面。我可以想到这样做的最简单的方法是一个Less mixin for nth-of-type ，而不是只应用规则到匹配的一个索引，而不是通过进入mixin的索引。基本上，我想这样：

They are each a few hundred pixels tall, but I want them to overlap each other so that the ones behind only 'peek' out above the ones in front by a few pixels. The easiest way I can think of to do this would be a Less mixin for nth-of-type that, instead of only applying the rules to the matching one index, instead passes the index into the mixin. Basically, I want this:

&: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中有更好的方法吗？

Obviously this is nonoptimal. Is there a better way to do this in Less?

或者，有一个像'layout-height'


Alternatively, is there a CSS field for something like 'layout-height' that would give the div a certain height (not its full height) in the layout?

推荐答案

假设你知道提前的元素数量（或者重新计算你的css在某种程度上），然后本质上你有工作如果放入循环结构，我最初发现这里在堆栈溢出。

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代码

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

这篇关于更少的混合或选择器来改变基于同胞索引的位置？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！