Sass学习笔记-Sass快速入门04

文章目录一、Map与相关函数1.1定义Map类型数据1.2 map-get(参数1，参数2) 可以根据键来得到值1.3 map-keys(参数1) 返回对象当中的所有key1.4 map-values(参数1) 返回对象当中所有的value1.5 map-has-key(参数1,参数2) 判断对象当中是否有指定的key1.6map-merge(参数1,参数2) 把两个Map合并到一起1.7 map-remove(参数1,参数2，...) 移除指定的键值对二、boolean 布尔值三、Interpolation 可以把一个值插入到另一个值里边四、流程控制语句4.1 @if 判断4.2 @for 循环4.3 @each in 循环4.4 @while 循环五、用户自定义函数六、错误与警告 一、Map与相关函数

Map就是列表项目带名字的列表，例如：
$map: (key1: valuel, key2: value2, key3: value3)

1.1定义Map类型数据 PS F:\Node.js\Node_project\ninghao-sass> sass -i >> $colors:(light:#ffffff,dark:#000000) (light: #ffffff, dark: #000000)

用在列表上边的函数同样可以处理Map类型的数据。
例如:
length() 查看变量中有，几个变量

>> length($colors) 2 1.2 map-get(参数1，参数2) 可以根据键来得到值

例如：

>> map-get($colors,dark) #000000 1.3 map-keys(参数1) 返回对象当中的所有key

例如：

>> map-keys($colors) ("light", "dark") 1.4 map-values(参数1) 返回对象当中所有的value

例如：

>> map-values($colors) (#ffffff, #000000) 1.5 map-has-key(参数1,参数2) 判断对象当中是否有指定的key

例如：

>> map-has-key($colors,test) false >> map-has-key($colors,dark) true 1.6map-merge(参数1,参数2) 把两个Map合并到一起 >> map-merge($colors,(light-gray:#e5e5e5)) (light: #ffffff, dark: #000000, light-gray: #e5e5e5)

合并之后我们可以把这个变量交给 $colors :

>> $colors:map-merge($colors,(light-gray:#e5e5e5)) (light: #ffffff, dark: #000000, light-gray: #e5e5e5) >> $colors (light: #ffffff, dark: #000000, light-gray: #e5e5e5) >> 1.7 map-remove(参数1,参数2，…) 移除指定的键值对

例如：

>> map-remove($colors,light,light-gray) (dark: #000000) >>

注意：移除过后很少 $colors并没有减少，例如:

>> $colors (light: #ffffff, dark: #000000, light-gray: #e5e5e5) >> map-remove($colors,light,light-gray) (dark: #000000) >> $colors (light: #ffffff, dark: #000000, light-gray: #e5e5e5)

可以看到$colors 还是原来的3个键值对
如果需要真正的移除需要对它赋值：
例如：

>> $colors (light: #ffffff, dark: #000000, light-gray: #e5e5e5) >> $colors:map-remove($colors,light,light-gray) (dark: #000000) >> $colors (dark: #000000) 二、boolean 布尔值

取值: true false

PS F:\Node.js\Node_project\ninghao-sass> sass -i >> 5px > 3px true >> 5px > 10px false >> (5px 6px) false >> (5px < 10px) and (5px > (5px 6px) true >> 5px > 3px true >> not (5px > 3px) false >> not (5px < 3px) true 三、Interpolation 可以把一个值插入到另一个值里边

简单点来说，就是在 特殊的地方(注释、属性名)等地方使用变量。
语法： #{} 花括号中间放变量名即可。
例如：
原创文章 21获赞 21访问量 1705 关注 私信 展开阅读全文
作者：疯狂的地球人

sass