前言：本文中所有sass文件都指后綴名為scss的文件。在此也建議使用后綴名為scss的文件，以避免sass后綴名的嚴格格式要求報錯。
一、sass插件的安裝：
gulp-sass-china
// 1.安裝插件
npm install gulp-sass-china
// 2.引入插件模塊
let sass = require("gulp-sass-china");
// 3.定義指令
gulp.task("sass",()=>{
return gulp.src("sass/*.scss")
.pipe(sass().on("error",sass.logError))
.pipe(gulp.dest("css"))
.pipe(connect.reload());
})
// 4.監聽文件更改
gulp.task("watch",()=>{
gulp.watch("sass/*.scss",["sass"])
})
// gulp-sass-china文檔參考：
// https://www.npmjs.com/package/gulp-sass-china
二、sass介紹
（1）sass是一種高效css編譯模式，目前這種高效的css編譯方式有兩種：sass／less。
（2）sass基於ruby語言，特點是沒有大括號，換行需要用縮進表示，非常難受。
（3）后來sass開發了兩種后綴名文件：一種后綴名為sass，不使用大括號和分號。
（4）另一種就是我們這里使用的scss文件，這種和我們平時寫的css文件格式差不多，使用大括號和分號。
（5）所有sass文件都指后綴名為scss的文件。在此也建議使用后綴名為scss的文件，以避免sass后綴名的嚴格格式要求報錯。
（6）sass是需要編譯的，sass不能直接用於頁面。它可以極大地提高編程效率（對於使用熟練的人來說）。
（7）sass想要應用在項目中需要編譯成css文件。這里使用gulp插件進行編譯（gulp-sass-china）。
三、sass語法
（1）變量：
// 必須以$開頭， 后面加上！default那就代表這個是當前變量的默認值。
$font-size:16px;
div{
font-size: $font-size;
}
（2）復雜變量的使用：
nth()方法，第一個參數為復雜變量，第二個參數為復雜變量的第幾個值，從1開始數一般我們都將變量當做屬性值來使用，但是也有極特殊情況下我們會將變量當做class里的類來使用。這時候，我們必須以#（$name）的方式來使用變量；
$linkColor:#b6b6b6 #ddd!default;
div{
color: nth($linkColor,1);
&:hover{
color:nth($linkColor,2);
}
}
$name:top !default;
.class-#{$name}{
border-#{name}:1px solid #b6b6b6;
}
（3）多值變量：map 和 list(復雜變量)：
// 多值變量代表的是多維數據的存儲方式，換句話說，list相當於js中的數組map相當於js中的對象。
// list數據一般用空格分割， 但是也可以用 逗號 或者小括號分割多個值。
list:
$list:(20px 40px)(30px 20px)(40px 30px);//相當於多維數組，其他格式同理；
$list:20px 30px 40px 50px 60px;
$list:20px,30px,40px,50px,60px;
// 使用：對於list的使用，可以使用 nth($list,num)去調用；
// 當然我們還可以去使用其他方式；
length($list) //返回list的長度
nth($list, $n) //返回索引的項目
set-nth($list, $n, $value) //設置list中第n個的值
join($list1, $list2, [$separator]) //將兩個列表鏈接在一起
append($list1, $val, [$separator]) //追加一個值到列表最后
zip($lists…) //將幾個列表組合成多維列表
index($list, $value) //返回一個列表中值的位置
$list:(top 20px 30px) (left 40px 50px) (right 60px 70px);
@each $name,$width,$height in $list{
.box-#{$name}{
width:$width;
height:$height;
}
}
map:
// map的數據是以鍵值對形式出現的，期中value可以是list。格式為
$map:(key1:value1, key2:value2, key3:value3)。
// 最常用的取值方法就是用map-get($map,$key) 進行取值
// 關於map還有很多函數：
map-get($map, $key) //返回key值；
map-merge($map1, $map2) //合並兩個$map；
map-remove($map, $keys…) //刪除某個value並返回value值；
map-keys($map) //以list形式返回所有$map 的key;
map-values($map) //以list形式返回所有$map中的value;
map-has-key($map, $key) //查看當前的$map是否有這個key
keywords($args) //返回一個關鍵字
$headers:(h1:20px,h2:30px,h3:40px);
@each $key, $value in $headers{
#{$key}{
font-size: $value;
}
}
// 這里的each用法那和我們js中的for-in用法基本一致，只不過寫法不同。
// $key 相當於for-in中的變量，$value 相當於for-in中的obj[i]；
（4）嵌套
// sass可以進行選擇器的嵌套，表示層級關
// 選擇器嵌套：
ul{
li{
list-style: none;
color:nth($linkColor,1);
}
}
// 屬性嵌套：
.class{
border:{
style:solid;
left:none;
right:1px;
color:#b6b6b6;
}
}
（5）@at-root（不推薦使用）：
//跳出當前選擇器嵌套。
.class{
color:f10;
.child{
width:100px;
}
}
.class2{
@at-root .child{
color:#b6b6b6;
}
}
@at-root (without: ...) 和 @at-root (with: ...)
// 默認@at-root只會跳出選擇器嵌套，而不能跳出@media或@support
// 如果要跳出這兩種，則需使用@at-root (without: media)，@at-root (without: support)。
// 這個語法的關鍵詞有四個：
// all（表示所有）
// rule（表示常規css）
// media（表示media）
// support（表示support，因為@support目前還無法廣泛使用，所以對其忽略）。
// 我們默認的@at-root其實就是@at-root (without:rule)。
@media screen and (max-width:641px){
.parent{
color:#b6b6b6;
@at-root .child{
width:100px;
}
}
}
// 在這里.child只會跳出.parent 和.parent類作為同級，
// 而不會跳出@media 那么我們如何讓他跳出@media那？
@media screen and (max-width:641px){
.parent{
color:#b6b6b6;
@at-root (without:media) {
.child{
width:100px;
}
}
}
}
// 這種編譯模式會將我們的css編譯成
@media screen and (max-width: 641px) {
.parent {
color: #b6b6b6;
}
}
.parent .child {
width: 100px;
}
// 也就是說，這時候我們的 .child 帶着他的父級跳出了media嵌套。
@media screen and (max-width:641px){
.parent{
color:#b6b6b6;
@at-root (without:all) {
.child{
width:100px;
}
}
}
}
// 和剛才的執行結果有稍微的一點差異,變成了這個樣子；
@media screen and (max-width: 641px) {
.parent {
color: #b6b6b6;
}
}
.child {
width: 100px;
}
// 注意：這次的跳出是不帶父級的。
// 小技巧：@at-root 其實有很多的組合配合，和 &配合可以改變css的從屬關系；
.parent{
@at-root .child &{
color:#b6b6b6;
}
}
（6）@mixin：
// mixin（混合）
// sass中使用@mixin聲明混合，可以傳遞參數，參數名以$符號開始，多個參數以逗號分開，
// 也可以給參數設置默認值。聲明的@mixin通過@include來調用。sass中可用mixin定義一些代碼片段，
// 且可傳參數，方便日后根據需求調用。從此處理css3的前綴兼容輕松便捷。
// 無參數 mixin
@mixin marginCenter{
margin-left:auto;
margin-right:auto;
}
.cont{
@include marginCenter;
}
// 有參數 mixin
// 1）必須傳參數的應用
@mixin transform($type){
-webkit-transform: $type;
-moz-transform: $type;
-ms-transform: $type;
-o-transform: $type;
transform: $type;
}
.box{
@include transform(scale(1.2))
}
// 2）設置默認情況的mixin（當你不傳入參數直接使用的話那會調用默認值）
@mixin opacity($opacity:50){
opacity: $opacity/100;
filter:alpha(opacity=$opacity)
}
.box{
@include opacity()
}
// 多個參數 mixin
// 調用時可直接傳入值，如@include傳入參數的個數小於@mixin定義參數的個數，
// 、則按照順序表示，后面不足的使用默認值，如不足的沒有默認值則報錯。
// 除此之外還可以選擇性的傳入參數，使用參數名與值同時傳入。
@mixin line($border:1px border #ccc, $padding:10px){
border-bottom:$border;
padding-top:$padding;
padding-bottom:$padding;
}
.list ul{
@include line(1px solid #ccc);
}
.list p{
@include line($padding:15px);
}
// 多組值參數mixin
// 一個參數可以有多組值，如box-shadow、transition等，
// 那么需要在參數后加三個點表示，如$shadow...
@mixin box-shadow($shadow...) {
-webkit-box-shadow:$shadow;
box-shadow:$shadow;
}
.box{
border:1px solid #ccc;
@include box-shadow(0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),
0 4px 4px rgba(0,0,0,.3));
}
// 擴展/繼承
// sass可通過@extend來實現代碼組合聲明，使代碼更加優越簡潔。
.active{
border:1px solid #b6b6b6;
padding:10px;
color: #333;
}
.success{
@extend .active;
width:100px;
}
（7）運算：
// sass可進行簡單的加減乘除運算等，當我們拿到一張需要轉換成百分比或rem布局的設計稿，這時候我們有福了
.container{
width: 100%;
}
//百分比
.aside{
width:(600px/960px)*100%;
}
//rem
.article{
width:(300px/960px)*1rem;
}
（8）函數：
// sass定義了很多函數可供使用，當然你也可以自己定義函數，以@fuction開始。
// 實際項目中我們使用最多的應該是顏色函數，而顏色函數中又以lighten減淡和darken加深為最，
// 其調用方法為lighten($color,$amount)和darken($color,$amount)，
// 它們的第一個參數都是顏色值，第二個參數都是百分比。
$baseFontSize:10px;
$gray:#ccc;
@function pxToRem($px){
@return ($px/$baseFontSize)*1rem;
}
body{
font-size:$baseFontSize;
color:lighten($gray,10%);
}
.test{
font-size:pxToRem(16px);
color:darken($gray,10%);
}
// 這個和我們JS中的函數那非常的相似，可以和我們js中的函數一樣使用。
// 同時注意，這里的返回值幾乎是必須的所以請在每個函數結束時，使用@return去返回需要的返回值。