Sass变量-------持续更新

• 变量
  • 局部变量
  • 全局变量
• 变量默认值
• 多值变量
  • 用法一
  • 用法二 --- 列表
  • 列表函数
• maps映射
  • 有关maps的其它函数
    • map-has-key(map,key)
    • map-keys(map)

变量

定义一个变量(以$号开头)：$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);
}

列表函数

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

map-keys(map)