变量
定义一个变量(以$号开头)：$name:green
使用定义好的变量：color:$name
变量也可以用在属性选择器上：
#{变量名}
例如:$className:main; .#{$className}{ color:red; }
局部变量
sass中的局部变量仅能在{ }(变量定义时所在的双括号)内部访问。
body{
$color:red; //局部变量,只能在当前大括号内访问
background-color:$color;
}
将局部变量变为全局变量，可以加上!global标识符：
body{
$color:red !global; //全局变量,当前文件内都可以访问
background-color:$color;
}
.header{
background-color:$color;
}
全局变量
全局变量在整个scss文件内部都可以访问到。
$color:red;
body{
background-color:$color;
}
变量默认值
为一个变量定义默认值可以使用! default标识符:
$color:red; //重写默认值,改为red
$color:green !default; //默认值为green
body{
background-color:$color;
}
多值变量
用法一
我们可以为一个变量赋多个值，通过nth()函数读取指定值。
nth(name,index)函数有两个参数:
name: 变量名称index: 变量值的位置(注意是重1开始的)
$paddings:10px 5px 20px 40px;
//等价于 $paddings:(10px 5px 20px 40px);
body{
padding:$paddings;
padding-left:nth($paddings,1); //左内边距为10px
}
用法二 --- 列表
列表就是 Sass 的数组。列表是一个一维的数据结构，用于保存任意类型的数值（包括列表，从而产生嵌套列表)
$paddings:(red,green,yellow,black);
body{
color:nth($paddings,2);
background-color:nth($paddings,1);
}
列表函数
| append(list, value, [separator]) | 将单个值 value 添加到列表尾部。separator 是分隔符，默认会自动侦测，或者指定为逗号或空格。 实例:append((a b c), d) 结果: a b c d append((a b c), (d), comma) 结果: a, b, c, d |
|---|---|
| index(list, value) | 返回元素 value 在列表中的索引位置。 实例: index(a b c, b) 结果: 2 index(a b c, f) 结果: null |
| is-bracketed(list) | 判断列表中是否有中括号 实例: is-bracketed([a b c]) 结果: true is-bracketed(a b c) 结果: false |
| join(list1, list2, [separator, bracketed]) | 合并两列表，将列表 list2 添加到列表 list1 的末尾。separator 是分隔符，默认会自动侦测，或者指定为逗号或空格。 bracketed 默认会自动侦测是否有中括号，可以设置为 true 或 false。 实例: join(a b c, d e f) 结果: a b c d e f join((a b c), (d e f), comma) 结果: a, b, c, d, e, f join(a b c, d e f, $bracketed: true) 结果: [a b c d e f] |
| length(list) | 返回列表的长度 实例: length(a b c) 结果: 3 |
| list-separator(list) | 返回一列表的分隔符类型。可以是空格或逗号。 实例: list-separator(a b c) 结果: "space" list-separator(a, b, c) 结果: "comma" |
| nth(list, n) | 获取第 n 项的值。 实例: nth(a b c, 3) 结果: c |
| set-nth(list, n, value) | 设置列表第 n 项的值为 value。 实例: set-nth(a b c, 2, x) 结果: a x c |
| zip(lists) | 将多个列表按照以相同索引值为一组，重新组成一个新的多维度列表。 实例: zip(1px 2px 3px, solid dashed dotted, red green blue) 结果: 1px solid red, 2px dashed green, 3px dotted blue |
maps映射
maps允许我们一次定义多个变量,并通过map-get()函数获取指定变量的值。
格式：$name:(key:value,....)
map-get(map,key)函数有两个参数：
map: 指定哪个map映射key:map中的key
$colors:(color:red,borderColor:green);
body{
background-color:map-get($colors,color);
border-color:map-get($colors,borderColor);
}
有关maps的其它函数
map-has-key(map,key)
作用：判断map是否有对应的key
实例：
$font-sizes: ("small": 12px, "normal": 18px, "large": 24px)
map-has-key($font-sizes, "big")
//结果: false