Sass中使用@each循环

项目中需要实现这样一个效果（五颜六色的 CheckBox）：

1. 首先创建好一个模板：

2. 添加样式，如果不用循环也能实现：

3. 不过 Sass 为我们提供了更合适的写法。由图片可知我们需要为七个 CheckBox 添加不同的类名并为它们内部的元素添加不同的背景颜色（.md-container 和 .md-icon 均为 Angular Material 解析而来，改变 CheckBox 的背景颜色可通过改变 .md-icon 的背景颜色来实现），可以在 Sass 中用数组 $class-name-list 存放所有类名，用数组 $class-dialog-colors-list 存放所有颜色值，然后用一个循环即可为所有 CheckBox 添加不同的背景颜色：

总结：刚开始有一种写法是把每个颜色值赋给一个变量，然后通过字符串拼接的方法拼出这个变量：background-color: unquote('$')#{$color}Background（比如定义其中一个颜色值变量为$orangeBackground: #f5a623;），但是这样并没有成功，解析的结果在浏览器中是这样的“background-color：$orangeBackground”。

转载于:https://www.cnblogs.com/hiwynn/p/7833708.html

Sass中使用@each循环相关推荐

java for循环返回值_Java中的for循环——通过示例学习Java编程（9）
作者:CHAITANYA SINGH 来源:https://www.koofun.com/pro/kfpostsdetail?kfpostsid=21 循环用于反复执行同一组语句,直到满足特定条件为止 ...
简单介绍Lua中三种循环语句的使用
今天小编就为大家分享一篇关于Lua中三种循环语句的使用讲解,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧 Lua的循环和C语言的循环的语法其实差不多,所以, ...
js中如何得到循环中的点击的这个id_Js篇面试题9请说一下Js中的事件循环机制
虽互不曾谋面,但希望能和您成为笔尖下的朋友以读书,技术,生活为主,偶尔撒点鸡汤不作,不敷衍,意在真诚吐露,用心分享点击左上方,可关注本刊标星公众号(ID:itclanCoder) 如果不知道如 ...
shell中的for循环语句
shell中的for循环语句 for语句语法: for 变量 in 值1 值2 值3 -- do 语句 done 机理:把各值依次赋给for后的变量,每赋值一次,便执行一次do与done之间的语句 ...
pythonfor循环语句1到7、不要4_【IT专家】关于Python中的for循环控制语句
本文由我司收集整编,推荐下载,如有疑问,请与我司联系关于 Python 中的 for 循环控制语句 2010/06/14 500461 #第一个:求 50 - 100 之间的质数 import ma ...
java for 嵌套_Java中的for循环嵌套
Java嵌套循环是指在一个循环语句的循环体中再定义一个循环语句的语法结构.whiledo.while.for循环语句都可以进行嵌套,并且它们之间也可以互相嵌套,如最常见的在for循环中嵌套for循环, ...
python循环语句-python中的for循环语句怎么写
python中的for循环语句怎么写? Python for 循环语句 Python for循环可以遍历任何序列的项目,如一个列表或者一个字符串. for循环的语法格式如下: 1 2 for iter ...
mysql 存储过程声明式游标_Mysql 存储过程中使用游标循环读取临时表
游标游标(Cursor)是用于查看或者处理结果集中的数据的一种方法.游标提供了在结果集中一次一行或者多行前进或向后浏览数据的能力. 游标的使用方式定义游标:Declare 游标名称 CURSOR ...
java中的for-each循环
增强 for 循环可以在不知道初始值和终止值的情况下,对数组和集合元素进行遍历,其语法如下. for(数据类型变量名 : 数组或集合){循环代码块 } 例如使用增强 for 循环遍历一个整型数组 ...
python中的for循环
这是我的第一篇写关于python的博客,在这篇文章里主要介绍python像其他语言一样去使用for循环,通过几个案例来说明 1.python通过for循环来显示数组内容 int_s=[1,2,3,4, ...

Sass中使用@each循环

Sass中使用@each循环相关推荐

最新文章

热门文章