使用Sass设置背景-定义数组@for循环

宛宛心里的月亮

于 2021-08-01 14:45:08 发布

阅读量1.5k

点赞数

分类专栏：前端技术文章标签： sass css

本文链接：https://blog.youkuaiyun.com/qq_40815009/article/details/119295172

版权

本文介绍了如何使用Sass的@for循环和变量来简化CSS编写，特别是针对需要为多个元素设置不同渐变背景颜色的情况。通过声明颜色数组并使用 nth() 函数，可以高效地为每个菜单项生成独特的样式，提高代码的复用性和可维护性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述
假设在项目中，我们要实现这样一个效果。9个功能入口菜单，每个菜单模块都有不同的渐变背景颜色及图标，在原生css中我们可能需要单独写每一个item的样式，sass为我们提供了方便的语法；
-----------声明变量

/*公共样式文件default.scss中*/
$colors01: #066efc;
$colors02: #05cccc;
$colors03: #fb6502;
$colors04: #199a01;
$colors05<