Sass介紹
》 CSS 不是一個程式語言，可以用它來開發網頁樣式，但是沒有辦法用它進行程式設計。SASS 的
出現，讓 CSS 實現了通過程式碼程式設計來實現的方式。
》SASS 是一種 CSS 開發工具，提供了許多便利的寫法，讓CSS 的處理實現了可程式設計處理。
》 SASS 擴充套件了 CSS3，增加了規則、變數、混入、選擇器、繼承等等特性，可以生成風格良好的 CSS 樣式表檔案，易於組織和維護。
環境搭建及編譯指令
》安裝 ruby(sass的依賴環境，必須安裝),
》 gem install sass
ruby -v gem -v gem install sass檔案路徑 sass -v
》自動編譯命令
sass檔案目錄 sass --watch scss檔案的路徑 : css檔案的路徑
》編譯輸出格式
預設情況下，SASS 提供了四種格式的 CSS 輸入，預設情況輸出是巢狀格式
nested 巢狀
compact 緊湊 每個選擇器程式碼在一行
expanded 擴充套件(完全格式化標準)
compressed 壓縮一行
sass檔案目錄 sass --watch scss檔案的路徑 : css檔案的路徑 --style expanded
》 sass 副檔名
.sass【sass3.0-版本】
.scss【sass3.0+版本，常用】
備註：sass 有兩種字尾名檔案：一種字尾名為 sass，不使用大括號和分號；另一種就是我們這 裡使用的 scss 檔案，這種和我們平時寫的 css 檔案格式差不多，使用大括號和分號。
在此也建議使用字尾名為 scss 的檔案，以避免 sass 字尾名的嚴格格式要求報錯。
Sass-變數定義
》 變數：必須是$符號開頭，後面緊跟變數名，變數名稱和變數值之間要使用冒號:
進行分隔（參考 CSS 屬性和值的設定語法） ，如果值後面加上[!default]就表示預設值。
引用變數的值，直接使用變數名稱，即可引用定義的變數的值。
》 特殊變數：一般情況下，我們定義的變數都是屬性值，可以直接使用，但是如果變數作
為屬性或者其他的特殊情況下，必須使用#{$variable}的形式進行呼叫。
Sass-巢狀
》 選擇器巢狀，在巢狀的過程中，如果需要用到父元素，在 SASS 中通過&符號引用父屬性
》 巢狀屬性——不常用
Sass-mixin函式
sass 中可以通過@mixin 宣告混合，可以傳遞引數，引數名稱以$開始，多個引數之間使用
逗號分隔，@mixin 的混合程式碼塊由@include 來呼叫。
》 無引數混合——不建議使用
》 有引數混合
》 多引數混合
Sass-繼承擴充套件--@extend
在 SASS 中，通過繼承/擴充套件來減少重複程式碼，可以讓一個選擇器去繼承另一個選擇中所有
的樣式。
Sass-匯入
》 CSS 本身包含一個指令@import，但是 CSS 中的@import 每次執行都會傳送一次新的請求都會消耗一定的資源
》 Partials 這樣的檔案， 命名規範是以下劃線開頭的， 這樣的 scss 檔案不會被編譯成 css
檔案。
》 Partials 是用來定義公共樣式或者元件的樣式的， 專門用於被其他的 scss 檔案 import
進行使用的
》 在 SCSS 檔案中引入指令@import 在引入Partials 檔案時，不需要新增下劃線和副檔名。
編譯多個scss檔案：
sass --watch . : css --style expanded
sass --watch scss/.:style --style expanded
scss：sass的資料夾 style：css的資料夾
Sass-判斷語句
@if 指令是 SASS 中的一個控制指令，用於在表示式滿足條件（true）的時候輸出指定的
樣式，在不滿足條件（false）或者表示式為 null 的情況下輸出其他的樣式
@if 條件 {
// 當條件為真時執行的樣式
}
同樣，也可以通過@else if 和@else 指令結合，進行多條件的判斷
Sass-陣列/map
map 就是列表專案中帶名稱的列表
l $map：(key1:value1, key2:value2, key3:value3)
》 length($map):獲取 map 中的元素對個數
》 map-get($map, key):獲取$map 中名稱為 key 的值
》 map-keys($map):獲取指定$map 中所有的 key
》 map-values($map):獲取指定$map 中所有的 value
》 map-has-key($map, key):判斷在$map 中是否包含指定的 key
》 map-merge($map1, $map2):將$map1 和$map2 合併在一起
》 map-remove($map, key):將指定名稱的 key 從$map 中移除
Sass-迴圈語句
@for 指令在 SASS 中用於重複處理一組指令
有兩種表現形式
l @for $var from <開始值> through <結束值>
l @for $var from to
to 和 through 都是表示一個區間，唯一的區別就是停止迴圈的地方不一樣。$var 可以是
任意一個變數名稱如$i，和是 SASS 表示式並且必須是整數
Sass-function介紹
函式的功能主要是資料的運算，SASS 中可以將一些值交給函式進行處理，具體的處理方式
由定義的函式具體的設計確定。
@function 函式名稱(引數列表){
// 資料處理
}
gulp介紹
gulp 是前端開發過程中對程式碼進行構建的工具， 是自動化專案的構建利器； 她不僅能對網站資源進行優化，而且在開發過程中很多重複的任務能夠使用正確的工具自動完成；大大提高我們的工作效率。
Node環境安裝
NPM命令
gulp安裝
n npm install -g gulp
n npm install —-save-dev gulp (安裝到專案目錄下)
gulp外掛安裝（編譯/壓縮/合併/程式碼檢查/即時重新整理）
npm install gulp-jshint gulp-concat gulp-uglify gulp-rename gulp-jshint-html-reporter
gulp-imagemin --save-dev
外掛介紹
gulp-jshint ： 檢查語法錯誤
gulp-concat ： 合併
gulp-uglify ： 壓縮
gulp-rename ： 重新命名
gulp-jshint-html-reporter ：語法錯誤報告
gulp-imagemin ： 圖片壓縮
gulp使用
結合sass的使用
sass 使用 gulp-sass, 安裝： npm install --save-dev gulp-sass
var gulp = require('gulp'),
sass = require("gulp-sass");
gulp.task('compile-sass', function () {
gulp.src('sass/*.sass')
.pipe(sass())
.pipe(gulp.dest('dist/css'));
});