更少的混合或选择器来改变基于同胞索引的位置? [英] 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.
一百像素高,但我想让他们彼此重叠,以便只有偷看在前面的几个像素的前面。我可以想到这样做的最简单的方法是一个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?
或者,有一个CSS字段为'layout-height'$ c / c>
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代码
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);
}
输出
.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屋!