scss 变量_scss/sass实现列表顺序加载动画

你可以使用 Sass 的循环和变量来实现一个列表顺序加载动画。以下是一个简单的示例代码：

$delay: 0.1s; // 每个列表项的动画延迟时间
$duration: 0.3s; // 每个列表项的动画持续时间

@for $i from 1 through 10 { // 循环生成 10 个列表项
  li:nth-child(#{$i}) { // 选择器
    transition: transform $duration ease $delay * $i; // 动画效果
    transform: translateY(50px); // 初始状态
  }
}

在上面的代码中，我们使用了 `@for` 循环生成了 10 个列表项，并使用 `nth-child()` 选择器来选择每个列表项。然后我们使用了 `transition` 属性来实现动画效果，它包含了需要过渡的属性，持续时间，缓动函数和延迟时间。最后，我们在每个列表项的初始状态中设置了 `transform` 属性。

这个示例代码可以让你从顶部向下依次加载列表项，并在每个列表项之间添加了适当的延迟时间，以实现一个简单的列表顺序加载动画。你可以根据自己的需求进行修改和调整。