局部变量
body{
$color : red;
color:$color;
}
footer{//footer里将访问不到$color变量,因为它是局部的
color:$color;
}
全局变量
body{
$color : red !global;
color:$color;
}
footer{//footer里将可以访问$color变量,因为它是全局的
color:$color;
}
多值变量
$paddings : 5px 10px 5px 10px;
body{
padding : $paddings;
}
//如果我们只想取一个值 如:
padding-left : nth($paddings,1);
//注意:索引是从1开始的不是从0.
- maps类型
$maps:( color:red , borderColor:blue );
body{
background:map-get($maps,color);
border-color:map-get($maps,borderColor);
}
部分文件
部分文件一般以'_'下划线开头 如:_part1.css
我们就可以导入或者引用这个部分文件,减少css的重复
//然后我们就可以导入文件了
@import "_part1.css"
下面三种情况被识别为css原生导入
: 被导入文件是以.css结尾
: 被导入文件是一个URL地址(如:http://xxx/xxx.css)
: 被导入文件的名字是CSS的url()值
//导入sass文件 _part1.scss
@import "part1"
//只用写文件名就可以了,然后就吧part1的内容写入当前文件中
//写'_'和后缀也行