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

发布时间：2020-12-14 16:38:41 所属栏目：资源来源：网络整理

导读：我正在尝试根据他们的兄弟姐妹来调整几个兄弟div的位置.目前,他们都是绝对的,但这并不是一成不变的. 它们每个都有几百个像素高,但是我希望它们彼此重叠,这样后面的那些只能“偷看”在前面几个像素之上.我能想到的最简单的方法是使用nth-of-type的Less mixin,

我正在尝试根据他们的兄弟姐妹来调整几个兄弟div的位置.目前,他们都是绝对的,但这并不是一成不变的.

它们每个都有几百个像素高,但是我希望它们彼此重叠,这样后面的那些只能“偷看”在前面几个像素之上.我能想到的最简单的方法是使用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一定的高度(而不是它的全高)？

解决方法

假设你事先知道元素的数量(或者以某种方式重新计算你的css),那么基本上你有什么工作,如果 put into a loop structure我最初发现 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;
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!