在里面使用变量：nth-​​child（n + x）伪类

Question

目前我有一小段LESS基本上会将每个后续孩子从顶部进一步向下移动：

    &:nth-child(n+2) {
        top: @alertTop + 10px;
    }

    &:nth-child(n+3) {
        top: @alertTop + 20px;
    }

    &:nth-child(n+4) {
        top: @alertTop + 30px;
    }

无论如何都要使用＆＃39; x＆＃39; ＆＃39; n + x＆＃39;的一部分在计算中，我不必手动添加这些？

即。类似的东西：

    &:nth-child(n+x) {
        top: @alertTop + (x * 5px);
    }

仅限LESS / CSS方法。

Answer 1

From the documentation：创建一个调用自身的mixin，以及一个保护表达式：

<强> LESS

#test {
  @child-count: 5;
  @child-height: 100px;
  position: relative;
  height: @child-count * @child-height;
  > div {
    position: absolute;
    left: 0;
    right: 0;
    height: @child-height;
    background: red;
  }
  .loop(@i) when (@i <=5) {
    > :nth-child(@{i}) {
      top: (@i - 1) * @child-height;
    }
    .loop(@i + 1);
  }
  .loop(1);
}

<强>结果

#test {
  position: relative;
  height: 500px;
}
#test > div {
  position: absolute;
  left: 0;
  right: 0;
  height: 100px;
  background: red;
}
#test > :nth-child(1) {
  top: 0px;
}
#test > :nth-child(2) {
  top: 100px;
}
#test > :nth-child(3) {
  top: 200px;
}
#test > :nth-child(4) {
  top: 300px;
}
#test > :nth-child(5) {
  top: 400px;
}

CodePen