Sass的學習筆記
Sass被稱為“CSS前處理器”，就是用一種程式設計的思想去寫CSS樣式表。在還沒接觸Sass的時候，很多人都不願意去了解，認為都會了CSS，為什麼還要去寫Sass，Sass最終生成的還是CSS檔案呀。
最初，我也是這麼認為的。
在我認真的學了Sass之後，原來使用Sass對CSS有很大的幫助，對於經常性寫CSS檔案的設計師們，節省了很多的開發時間，並且可以寫出擴充套件性更強、更易於維護的程式碼。下面是我記錄了Sass的學習筆記。
一. sass安裝
1.1 Ruby安裝
主要針對的是window系統下的安裝，因為Sass依賴於Ruby環境，所以應先安裝Ruby，Ruby安裝包下載連結：http://rubyinstaller.org/downloads/
下載之後，安裝過程中，請勾選Add Ruby executables to your PATH，新增環境變數。
如果沒有勾選，需在安裝完成之後配置Ruby環境變數。
在window系統中，新建系統變數RUBY_HOME，存放Ruby安裝路徑（D:\Program Files\Ruby23-x64
在系統變數Path中，新增Ruby執行環境路徑（%RUBY_HOME%\bin），Ruby環境變數配置完成。
1.2 執行gem命令
安裝完成之後，在開始選單中找到Ruby，開啟Start Command Prompt with Ruby，輸入ruby -v，如果顯示ruby的版本資訊，表示安裝成功。
1.3 安裝sass
A. 安裝方法一：原配置源安裝
在命令列中直接輸入gem install sass，按回車鍵即可。等待一段時間會提示安裝成功。（因為國內網路原因，估計會安裝不成功，所以可以翻牆或者選擇下面淘寶映象安裝）
安裝Sass測試版本 gem install sass –pre
升級Sass版本 gem update sass
檢視Sass版本 sass –v
幫助命令列 sass -h
B. 安裝方法二：淘寶映象安裝
首先移除預設的配置源（https://rubygems.org/），然後新增淘寶映象的配置源（https://ruby.taobao.org/），在命令列中輸入
gem source --removehttps://rubygems.org/
gem source --addhttps://ruby.taobao.org/
輸入gem source檢視當前的源是否為淘寶映象配置源，如果為淘寶源，再輸入gem install sass，等待一段時間，會提示安裝成功。
C. 安裝方法三：本地安裝
還可以選擇本地安裝，需要在網上找到Sass的gem檔案，下載連結：https://rubygems.org/gems/sass
下載之後，存放在任意位置，在命令列中輸入gem install E://sass-3.4.22.gem，安裝路徑，根據自己存放的路徑填寫。
二. Sass基本用法
2.1 匯入
我們都知道CSS檔案，都有匯入功能，@import ‘reset.css’，但是在建站方面，這種匯入效果和頁面分別link兩個CSS檔案樣式表的效果是一樣的，因為HTTP請求的數目並不會減少。
在Sass中，也有匯入功能，如果匯入的是CSS檔案，@import ‘reset.css’，那效果和CSS檔案匯入效果是一樣的，它還是以@import存在，並不會合併到編譯後的CSS檔案中。Sass匯入可以省略.scss字尾名，如果以@import ‘reset’方式匯入，會合併到編譯後的CSS檔案。一般需要匯入的Sass檔案是以_開頭命名，如_reset.scss，匯入只要引入reset即可。
被匯入Sass檔案，_a.scss：
$fontSize: 12px;
需要匯入樣式的Sass檔案，b.scss：
@import 'a'; body { font-size: $fontSize; }
編譯後的CSS樣式：
body { font-size: 12px; }
2.2 註釋
Sass檔案添加註釋有兩種方式：
/* 這是註釋 */
這種方式和CSS檔案中的註釋是一樣的。如果在壓縮模式下使用這種註釋方式，那麼在最終生產的CSS檔案中註釋將會被刪除。但如果不用壓縮輸出方式，註釋將保留在CSS檔案中。
// 這是註釋
Sass有可以用兩條正斜槓表示單行註釋，這和JavaScript、Java檔案的單行註釋方式相同。這種方式的註釋，不會顯示在輸出的CSS檔案中。
2.3 變數
Sass中定義變數的語法是：美元符號、變數名、冒號、變數值。
A.普通變數$variable-name: value;
$colorMain: orange; a { color: $colorMain; }
編譯後的CSS樣式：
a { color: orange; }
B.預設變數$variable-name: value !default;
$fontSize: 13px !default; body { font-size: $fontSize; }
編譯後的CSS樣式：
body { font-size: 13px; }
如果需要改變預設變數，在預設變數前面，重新賦值即可。（！default標識告訴Sass，只有在沒有其他值賦值的情況下才使用預設值。）
$fontSize: 12px; $fontSize: 13px !default; body { font-size: $fontSize; }
編譯後的CSS樣式：
body { font-size: 12px; }
C.多值變數$variable-name: value1 value2 value3;
Sass可以定義多值變數， 多值變數可以分為list型別和map型別，對應於JavaScript的陣列和物件。
list型別變數，是以空格，逗號或者括號來分割多個值，可用nth($list, n)函式來取值。
$colorLink: #222 $colorMain; //第一個為預設顏色值，第二個為滑鼠滑過顏色值 a { color: nth($colorLink, 1); &:hover { color: nth($colorLink, 2); } }
編譯後的CSS樣式：
a { color: #222; } a:hover { color: orange; }
上面這部分類似為一維陣列的定義和使用，下面為多維陣列：
$px: 20px 15px, 15px 20px; //二維陣列
或者用括號來分割：
$px: (20px 15px) (15px 20px); //二維陣列
map型別變數，是以key-value成對定義的，其中value值又可以為普通變數或者list變數。格式為：$map(key1: value1, key2: value2, key3: value3)，可用map-get($map, $key)來取值。
$heading: (h1: 20px, h2: 16px, h3: 13px); body { font-size: map-get($heading, h3); }
編譯後的CSS樣式：
body { font-size: 13px; }
2.4 巢狀
巢狀語法是：選擇器，左大括號，屬性-值對，右大括號。在多值變數的時候，我們用到了一個&這樣的符號，指的是父元素選擇器，在巢狀偽選擇器的時候經常用到。（在使用巢狀的時候要注意，儘量不要超過三層。）
div { background: $colorMain; a { color: #fff;
text-decoration: none; &:hover, &:active { text-decoration: underline; } } }
編譯後的CSS樣式：
div { background: orange; } div a { color: #fff; text-decoration: none; } div a:hover, div a:active { text-decoration: underline; }
在上面我們講述的是選擇器的巢狀，在Sass中，還有一種屬性巢狀：
.div { background: { image: url("img/img_01.png"); repeat: no-repeat; position: center; } border: { style: solid; color: $colorMain; left: { width: 5px; } right: { width: 2px; } } }
編譯後的CSS樣式：
.div { background-image: url("img/img_01.png"); background-repeat: no-repeat; background-position: center; border-style: solid; border-color: orange; border-left-width: 5px; border-right-width: 2px; }
注意：屬性巢狀書寫時，一定不要忘了屬性後面所跟的冒號：。在對div的背景定義上，其實背景直接可以寫為background: url(“img/img_01.png”) no-repeat center，不用像上面那麼麻煩，所以在寫樣式的時候，也要注意減少不必要的麻煩。
2.5 繼承
使用@extend命令可讓任何元素繼承其他樣式定義好的屬性和值。如果有好幾個元素有共同的樣式屬性，這種情況可使用@extend命令。
.div { background: $colorMain; padding: 20px; } .div-01 { @extend .div; border: 2px solid #eee; } .div-02 { @extend .div; border: 2px solid #ccc; }
編譯後的CSS樣式：
.div, .div-01, .div-02 { background: orange; padding: 20px; } .div-01 { border: 2px solid #eee; } .div-02 { border: 2px solid #ccc; }
2.6 佔位符
佔位符與繼承@extend命令一起使用，有些情況下，一些程式碼只是用來做擴充套件用，就可以用佔位符選擇器，以此來減少冗餘程式碼。以繼承的例子來，只需將開頭的.div換為%div即可。這樣在生成的CSS檔案中就不會有.div的樣式。
%div { background: $colorMain; padding: 20px; } .div-01 { @extend %div; border: 2px solid #eee; } .div-02 { @extend %div; border: 2px solid #ccc; }
編譯後的CSS樣式：
.div-01, .div-02 { background: orange; padding: 20px; } .div-01 { border: 2px solid #eee; } .div-02 { border: 2px solid #ccc; }
2.7 混合巨集
混合巨集以@mixin命令宣告，基本語法是：@mixin mixin-name($parameter) {…: $parameter}，混合巨集既可以不傳遞引數，也可以有引數，並且可以是單個，也可以有多個引數。Compass提供了許多現成的混合巨集。
A.無引數混合巨集
無引數混合巨集相當於繼承，可以直接用繼承代替。
@mixin center-block { margin-left: auto; margin-right: auto; } .div { @include center-block; }
編譯後的CSS樣式：
.div { margin-left: auto; margin-right: auto; }
B.有引數的混合巨集
以圓角為例（通常在定義混合巨集的引數時，都會設定一個預設值，當然，也可以不設定。）：
@mixin border-radius($radius: 4px) { -moz-border-radius: $radius; -webkit-border-radius: $radius; -o-border-radius: $radius; -ms-border-radius: $radius; border-radius: $radius; } .div { @include border-radius(5px); }
編譯後的CSS樣式：
.div { -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; border-radius: 5px; }
C.多個引數混合巨集
對於#{$direction}，可能有點陌生，這是變數的一種特殊使用方法，在字串中使用，用#{}包含變數。
@mixin border-direction-radius($direction: top-left, $radius: 4px) { -moz-border-#{$direction}-radius: $radius; -webkit-border-#{$direction}-radius: $radius; -o-border-#{$direction}-radius: $radius; -ms-border-#{$direction}-radius: $radius; border-#{$direction}-radius: $radius; } .div { @include border-direction-radius(top-left, 5px) }
編譯後的CSS樣式：
.div {
-moz-border-top-left-radius: 5px; -webkit-border-top-left-radius: 5px; -o-border-top-left-radius: 5px; -ms-border-top-left-radius: 5px; border-top-left-radius: 5px; }
D.多組值引數
如果一個引數可以有多組值，如box-shadow，transition等，那麼引數則需要在變數後加三個點表示，如：$variables… 。以box-shadow為例，box-shadow: h-shadow v-shadow blur spread color inset，都指的是box-shadow: 水平偏量 垂直偏量 模糊值 陰影擴散值 陰影的顏色 inset值。
@mixin box-shadow ($shadow...){ -moz-box-shadow: $shadow; -webkit-box-shadow: $shadow; -o-box-shadow: $shadow; -ms-box-shadow: $shadow; box-shadow: $shadow; } .div { @include box-shadow(1px 1px 2px 0px gray, 0px 1px 0px 1px lighten(gray, 0.5)); }
編譯後的CSS樣式：
.div { -moz-box-shadow: 1px 1px 2px 0px gray, 0px 1px 0px 1px #818181; -webkit-box-shadow: 1px 1px 2px 0px gray, 0px 1px 0px 1px #818181; -o-box-shadow: 1px 1px 2px 0px gray, 0px 1px 0px 1px #818181; -ms-box-shadow: 1px 1px 2px 0px gray, 0px 1px 0px 1px #818181; box-shadow: 1px 1px 2px 0px gray, 0px 1px 0px 1px #818181; }
三. Sass程式設計
3.1 數學計算
Sass可進行加、減、乘、除計算。注意，進行計算時，數值的單位必須一致，並且運算子號最好兩邊都有一個空格，以免計算出錯。
A.加法
$widthContainer: 1200px; $widthLeft: 20%; $widthRight: 80%; .div { width: $widthLeft + $widthRight; }
編譯後的CSS樣式：
.div { width: 100%; }
B.減法
.div { width: $widthRight - $widthLeft; }
編譯後的CSS樣式：
.div { width: 60%; }
C.乘法
在計算乘法的時候要注意，當相乘時，如果值後面都帶單位，會出現問題。
.addition { width: 20px * 40px; }
編譯時，報錯：
800px*px isn't a valid CSS value.
如果只給一個值帶單位，就正常了
.addition { width: 20 * 40px; }
編譯後的CSS樣式：
.addition { width: 800px; }
D.除法
在計算除法的時候，跟乘法一樣，只需要一個值帶單位即可，並且表示式放在括號內，才能正常使用。
.addition { width: 80% / 20%; }
對此，編譯之後，在CSS中，是沒有意義的
.addition { width: 80% / 20%; }
如果使用括號：
.addition { width: (80% / 20); }
編譯之後的CSS樣式：
.addition { width: 4%; }
3.2 條件
@if和@else if控制命令，舉個簡單例子：
$div: left; .div { @if $div == left { float: left; }@else if $div == right { float: right; } }
編譯後的CSS樣式：
.div { float: left; }
3.3 迴圈
@for迴圈命令，有兩種形式：@for $variable from startNum to endNum，和@for $variable from startNum through endNum，startNum表示起始值，endNum表示結束值，關鍵字to迴圈時不包括endNum這個數，through迴圈時包括endNum這個數。
@for $i from 1 through 3 { .div-#{$i} {
width: 100px * $i;
}
}
編譯後的CSS樣式：
.div-1 { width: 100px; } .div-2 { width: 200px; } .div-3 { width: 300px; }
@for $variable from startNum to endNum：
@for $i from 2 to 4 { .div-#{$i} { width: 100px * $i; }
}
編譯後的CSS樣式：
.div-2 { width: 100px; } .div-3 { width: 200px; }
@each迴圈命令，基本語法是：@each $variable in list/map，list/map表示list型別或者map型別變數。
A.迴圈list型別變數
@each $list in a,b,c { .#{$list} { background-image: url("img/#{$list}.png"); } }
編譯後的CSS樣式：
.a { background-image: url("img/a.png"); } .b { background-image: url("img/b.png"); } .c { background-image: url("img/c.png"); }
多組值的迴圈：
$listData: (a, no-repeat, left top) (b, no-repeat, left bottom); @each $name, $repeatType, $sizeType in $listData { .#{$name} { background-image: url("img/#{$name}.png"); background-repeat: $repeatType; background-position: $sizeType; } }
編譯後的CSS樣式：
.a { background-image: url("img/a.png"); background-repeat: no-repeat; background-position: left top; } .b { background-image: url("img/b.png"); background-repeat: no-repeat; background-position: left bottom; }
B.迴圈map型別變數
$headings: (h1: 20px, h2: 16px, h3: 13px); @each $header, $size in $headings { #{$header} { font-size: $size; } }
編譯後的CSS檔案：
h1 { font-size: 20px; } h2 { font-size: 16px; } h3 { font-size: 13px; }
3.4函式
Sass提供了好多現成的函式，我們也可以自己定義函式，用@function命令定義函式，@return定義函式返回值。
@function func() { @return 13px; } body { font-size: func(); }
編譯之後的CSS樣式：
body { font-size: 13px; }