scss 这种css有什么简便写法?

发布于 2022-09-13 00:11:33 字数 257 浏览 48 评论 0

源代码

li{
  &:nth-child(1){
    animation-delay: 0;
  }
  &:nth-child(2){
    animation-delay: 0.2s;
  }
  &:nth-child(3){
    animation-delay: 0.4s;
  }
  &:nth-child(4){
    animation-delay: 0.6s;
  }
}         

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

不喜欢何必死缠烂打 2022-09-20 00:11:33
li {
  @for $i from 0 through 3 {
    &:nth-child(#{$i+1}) {
      animation-delay: 0.2s * $i;
    }
  }
}

image.png

旧伤还要旧人安 2022-09-20 00:11:33
@for $i from 1 to 7 {
   li:nth-child(#{$i}) {
    animation-delay: #{($i - 1) * 0.2}s;
  }
}
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文