css 递增第 n 个子属性值

Question

有没有办法在 nth-child(n) 中使用 n 来增加属性值以输出以下结果:

div:nth-child(1){
    top: -5px;
}
div:nth-child(2){
    top: -10px;
}
div:nth-child(3){
    top: -15px;
}
div:nth-child(4){
    top: -20px;
}
div:nth-child(5){
    top: -25px;
}

Answer 1

如果您使用像 sass 这样的预处理器，您就可以。

一个例子:

div {
  $var: 5;

  @for $i from 1 through 5 {
    &:nth-child(#{$i}) {
      top: -#{$var}px;
      $var: $var + 5;
    }
  }
}

演示:http://sassmeister.com/gist/7d7a8ed86e857be02d1a

另一种实现方式:

div {

  $list: 1 2 3 4 5;

  @each $i in $list {
    &:nth-child(#{$i}) {
      top: -5px * $i;
    }
  }
}

演示:https://www.sassmeister.com/gist/fb5ee7aa774aafb896cd71a828882b99