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.mzph.cn/news/593443.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Vivado JESD204B与AD9162建立通信实战总结

一、FPGA与AD9162的JESD204B接口 FPGA作为JESD204B接口的发送端,AD9162作为JESD204B接口的接收端。FPGA和AD9162的device clk、SYSREF由同源时钟芯片产生。其中,FPGA和AD9162的divice clk时钟不同,并且FPGA的decive clk等同于JESD204B IP的co…

RK3568驱动指南|第九篇 设备模型-第100章 在总线目录下创建属性文件实验

瑞芯微RK3568芯片是一款定位中高端的通用型SOC,采用22nm制程工艺,搭载一颗四核Cortex-A55处理器和Mali G52 2EE 图形处理器。RK3568 支持4K 解码和 1080P 编码,支持SATA/PCIE/USB3.0 外围接口。RK3568内置独立NPU,可用于轻量级人工…

qiankun微服务

官网 📦 基于 single-spa 封装,提供了更加开箱即用的 API。 📱 技术栈无关,任意技术栈的应用均可 使用/接入,不论是 React/Vue/Angular/JQuery 还是其他等框架。 💪 HTML Entry 接入方式,让你接…

如何利用ChatGPT处理文本、论文写作、AI绘图、文献查阅、PPT编辑、编程等

无论是进行代码生成、错误调试还是解决编程难题,ChatGPT都能为您提供实用且高质量的建议和指导,提高编程效率和准确性。此外,ChatGPT是一位出色的合作伙伴,可以为您提供论文写作的支持。它可以为您提供论文结构指导、段落重组建议…

低代码技术:颠覆数据孤岛的技术利器

在当今数据驱动的世界中,数据的价值无可忽视。然而,很多组织面临一个普遍的问题,即数据孤岛。数据孤岛指的是不同部门或系统之间无法有效共享和集成数据的情况。这限制了组织在数据驱动的决策和创新方面的能力。然而,低代码平台的…

关于HarmonyOs的参数传递UI刷新以及List,Grid嵌套数据传递,ui刷新问题总结

最近在学习开发过程中遇见一系列的参数传递以及ui刷新问题,在这里做个总结分享。 以下是在开发过程中遇见的问题: 1.页面与子组件之间的参数传递与UI刷新 2.Builder自定义内部子组件的参数传递与UI刷新 3.Grid与List item发生变化Ui刷新问题 4.List…

uniapp条件判断,在各平台执行不同代码等详解

文章目录 1️⃣ 条件判断1.1 方法支持1.2 写法1.3 js文件写法1.4 vue文件写法1.5 css文件写法1.6 平台名称详解优质资源分享作者:xcLeigh 文章地址:https://blog.csdn.net/weixin_43151418/article/details/135260505 uniapp条件判断,在各平台执行不同代码等详解,uniapp代码…

keil如何查看flash和ram占用情况

Keil MDK编译器下查看占用Flash和SRAM空间大小_keil sdram 1k-CSDN博客 1、如何查看各函数占用内存大小: keil查看使用的内存还剩多少_keil如何查看空间-CSDN博客

陈述式资源管理(2)

命令行。声明式资源管理 三种常见的项目发布方式: 1、蓝绿发布 2、金丝雀发布(灰度发布) 3、滚动发布 应用程序升级,最大困难就是新旧业务之间的切换。立项 --- 定稿 --- 需求发布 --- 开发 --- 测试 --- 发布。测试之后上线…

docker搭建Dinky —— 筑梦之路

简介 Dinky 是一个 开箱即用 、易扩展 ,以 Apache Flink 为基础,连接 OLAP 和 数据湖 等众多框架的 一站式 实时计算平台,致力于 流批一体 和 湖仓一体 的探索与实践。 主要功能 其主要功能如下: 沉浸式 FlinkSQL 数据开发&#x…

【感知机】感知机(perceptron)学习算法的原始形式

感知机( perceptron )是二类分类的线性分类模型,其输入为实例的特征向量,输出为实例的类别,取1 和-1二值。感知机对应输入空间(特征空间)中将实例划分为正负两类的分离超平面,是一种判别模型。感知机是神经网络与支持向量机的基础…

在Golang中如何配置WebSocket以使用wss

在Golang中配置WebSocket以使用wss(WebSocket over TLS)需要使用TLS(Transport Layer Security)来加密WebSocket连接。以下是一个简单的示例代码,演示了如何在Golang中配置WebSocket以使用wss: package ma…

C#_var

文章目录 一、前言二、隐式类型的局部变量2.1 var和匿名类型2.2 批注 三、总结 一、前言 C#中有一个 var 类型,不管什么类型的变量,都可以用它接收,实属懒人最爱了。 我没有了解过它的底层,甚至没看过它的说明文档,也…

大创项目推荐 深度学习动物识别 - 卷积神经网络 机器视觉 图像识别

文章目录 0 前言1 背景2 算法原理2.1 动物识别方法概况2.2 常用的网络模型2.2.1 B-CNN2.2.2 SSD 3 SSD动物目标检测流程4 实现效果5 部分相关代码5.1 数据预处理5.2 构建卷积神经网络5.3 tensorflow计算图可视化5.4 网络模型训练5.5 对猫狗图像进行2分类 6 最后 0 前言 &#…

Windows10系统打开管理员命令提示符的六种

在Windows10系统的运行过程中,我们常常需要打开管理员命令提示符,打开Windows10系统管理员命令提示符的方法很多,下面总结一下打开Windows10系统管理员命令提示符的方法。 工具/原料 硬件:电脑 操作系统:Windows10 …

.NET国产化改造探索(一)、VMware安装银河麒麟

随着时代的发展以及近年来信创工作和…废话就不多说了,这个系列就是为.NET遇到国产化需求的一个闭坑系列。接下来,看操作。 安装银河麒麟 麒麟系统分银河麒麟和中标麒麟,我选择的是银河麒麟服务器版的,关于如何下载,…

传统企业数字化转型怎么做?建议掌握这“5要素,7步骤,12维度”

关于“传统企业数字化转型”的文章,我看过很多,但大多数的内容都比较虚幻,无法落地执行~ 基于此,下面我来给出具体的一些建议,供大家参考! 一、传统企业数字化转型5要素 人、数据、洞察力、行动和结果。这…

Spring ApplicationEvent事件处理

Spring的事件 ApplicationEvent以及Listener是Spring为我们提供的一个事件监听、订阅的实现,内部实现原理是观察者设计模式,设计初衷也是为了系统业务逻辑之间的解耦,提高可扩展性以及可维护性。 ApplicationEvent就是Spring的事件接口Applic…

C# 中包含反斜线 \ 的字符串处理

在 C# 中,当您定义包含反斜线 \ 的文件路径字符串时,需要注意反斜线在字符串中通常用作转义字符的起始符。要在字符串中表示一个实际的反斜线字符,您有两个选择: 双反斜线:使用两个连续的反斜线 \\ 来表示一个实际的反…

Baumer工业相机堡盟工业相机如何通过NEOAPI SDK实现相机掉线自动重连(C#)

Baumer工业相机堡盟工业相机如何通过NEOAPI SDK实现相机掉线自动重连(C#) Baumer工业相机Baumer工业相机的掉线自动重连的技术背景通过PnP事件函数检查Baumer工业相机是否掉线在NEOAPI SDK里实现相机掉线重连方法:工业相机掉线重连测试演示图…