sass中如何使用@each循环语句

140 阅读 0 评论 93 点赞

我是靠谱客的博主酷炫黑米，最近开发中收集的这篇文章主要介绍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循环语句所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

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