使用@for循环反转sass中的项目列表

Question

这是我在 sass 中的 @for 循环：

@for $i from 1 through 10 {
  #users[data-state='unload'] li:nth-child(#{$i}n) {
    animation-delay: #{$i * 0.1}s;
  }
}

生成这个 css：

#users[data-state=loaded] li:nth-child(1n) {
  animation-delay: 0.1s;
}

#users[data-state=loaded] li:nth-child(2n) {
  animation-delay: 0.2s;
}

#users[data-state=loaded] li:nth-child(3n) {
  animation-delay: 0.3s;
}
/// etc...

我想要做的是将我的 css 读为：

#users[data-state=loaded] li:nth-child(1n) {
  animation-delay: 1s;
}

#users[data-state=loaded] li:nth-child(2n) {
  animation-delay: 0.9s;
}

#users[data-state=loaded] li:nth-child(3n) {
  animation-delay: 0.8s;
}
/// etc....

所以我想知道反转动画延迟所需的数学计算是什么，以便最后一个子元素具有入围时间，第一个子元素最长？

非常感谢 W9914420

Answer 1

改变动画延迟：#{$i * 0.1}s;作为动画延迟：#{(10 - $i) * 0.1}s;

@for $i from 0 through 10 {
  #users[data-state='unload'] li:nth-child(#{$i}n) {
    animation-delay: #{(10 - $i) * 0.1}s;
  }
}