sass

sass语法：
变量：
sass的变量必须是$开头，如果之后面加上！default则表示默认值。
默认变量：
sass的默认变量仅需要在值后面加上！default即可。默认变量根据需求覆盖，只需要在默认变量之前重新声明下变量。
特殊变量：
一般我们定义的变量都为属性值，可直接使用，但是如果变量作为属性或在某些特殊情况下等则必须要以#{$variables}}形式使用.
应用于class和属性：
.border-#{$borderDirction}{
border-#{$borderDirction}:1px solid #ccc;
}
应用于复杂的属性值：
body{
font:#{$baseFontSize}/#{$baseLineHeight};
}
多值变量：
多值变量分为list类型和map类型，简单来说list类型有点像js中的数组，而map类型有点像js中的对象。
list:
list数据可通过空格，逗号或小括号分隔多个值，可用nth($var,$index)取值。关于list数据操作还有很多其他函数如length($list)，join($list1,$list2,[$separator])，
append($list,$value,[$separator])等.
定义：
//一维数据
$px: 5px 10px 20px 30px;

//二维数据，相当于js中的二维数组
$px: 5px 10px, 20px 30px;
$px: (5px 10px) (20px 30px);
使用：
//sass style
//-------------------------------
$linkColor: #08c #333 !default;//第一个值为默认值，第二个鼠标滑过值
a{
color:nth($linkColor,1);

&:hover{
color:nth($linkColor,2);
}
}

//css style
//-------------------------------
a{
color:#08c;
}
a:hover{
color:#333;
}
map：
map数据以key和value成对出现，其中value又可以是list。格式为：$map: (key1: value1, key2: value2, key3: value3);。可通过map-get($map,$key)取值。
关于map数据还有很多其他函数如map-merge($map1,$map2)，map-keys($map)，map-values($map)等
使用：
//sass style
//-------------------------------
$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);
@each $header, $size in $headings {
#{$header} {
font-size: $size;
}
}
//css style
//-------------------------------
h1 {
font-size: 2em;
}
h2 {
font-size: 1.5em;
}
h3 {
font-size: 1.2em;
}
全局变量：
在变量值后面加上!global即为全局变量。