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即爲全局變量。