当前位置: 首页 > news >正文

scss使用for循环遍历,动态赋值类名并配置不同颜色

需求:后端要传入不同的等级,前端通过等级展示不同的字体颜色,通过scss遍历更有利于动态修改颜色或者增删等级

1.通过 @for $i from 1 through 4 定义循环,索引值为i
2.nth($colors, $i) 取出对应的颜色
$colors: #ff0000, #00ff00, #0000ff, #eeff00;
@for $i from 1 through 4 {.alarmDevice-#{$i}{color:nth($colors, $i);}
}
http://www.lryc.cn/news/272781.html

相关文章:

  • GaussDB数据库使用COPY命令导数
  • SunFMEA软件免费试用:FMEA的目标和限制是什么?
  • 【Redis交响乐】Redis中的数据类型/内部编码/单线程模型
  • APK 瘦身
  • GitHub上的15000个Go模块存储库易受劫持攻击
  • 避免3ds Max效果图渲染一片黑的4个正确解决方法
  • UI演示双视图立体匹配与重建
  • 添加一个编辑的小功能(PHP的Laravel)
  • YOLOv8改进 | 主干篇 | ConvNeXtV2全卷积掩码自编码器网络
  • elasticsearch7.17.9两节点集群改为单节点
  • 二叉树的层序遍历,力扣
  • 构建Dockerfile报错/bin/sh: 1: cd: can‘t cd to /xxx/yyy问题记录
  • Vue常用的修饰符详解(有哪些,怎么用)
  • Linux C/C++ 获取CPUID
  • 2023年“中银杯”安徽省网络安全B模块(部分解析)
  • 194.【2023年华为OD机试真题(C卷)】单行道汽车通行时间(迭代计算—JavaPythonC++JS实现)
  • 第二证券机构策略:股指预计维持蓄势震荡格局 关注煤炭、电力等板块
  • Go 泛型之泛型约束
  • 【数据仓库与联机分析处理】数据仓库
  • 机器学习:贝叶斯估计在新闻分类任务中的应用
  • [C#]基于deskew算法实现图像文本倾斜校正
  • Qt通过pos()获取坐标信息
  • 【Webpack】资源输入输出 - 配置资源出口
  • 【XR806开发板试用】XR806串口驱动CM32M对小厨宝的控制实验
  • 中介者模式-Mediator Pattern-1
  • ASP.NET Core基础之图片文件(一)-WebApi图片文件上传到文件夹
  • 精准掌控 Git 忽略规则:定制化 .gitignore 指南
  • Harmony 开始支持 Flutter ,聊聊 Harmony 和 Flutter 之间的因果
  • k8s 之7大CNI 网络插件
  • stable diffusion 人物高级提示词(一)头部篇