我是靠谱客的博主 酷炫黑米,这篇文章主要介绍sass中如何使用@each循环语句,现在分享给大家,希望可以做个参考。

平时得业务需求中大家肯定遇到过很多个标签然后展示不同得颜色得,单独写类名或者选取第几个child这种肯定不如写个循环方便。跟js写循环差不多步骤。

1.先定义一个值列表比如说:

2.定义完毕之后就可以直接写循环了

3.代码如下:

      $colors: (

        1: #3698fd,

        2: #1bc3bb,

        3: #faa500,

        4: #b37feb,

        5: #ef4c5d,

      );

@each $key, $color in $colors {

        &:nth-child(#{$key}) {

            color: $color;

        }

      }

最后

以上就是酷炫黑米最近收集整理的关于sass中如何使用@each循环语句的全部内容,更多相关sass中如何使用@each循环语句内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(79)

评论列表共有 0 条评论

立即
投稿
返回
顶部