Sass (Syntactically Awesome StyleSheets)
Sass是對css的擴展，讓 CSS 語言更強大、優雅。 它允許你使用變量、嵌套規則、 mixins、導入等衆多功能， 並且完全兼容 CSS 語法。 Sass 有助於保持大型樣式表結構良好， 同時也讓你能夠快速開始小型項目， 特別是在搭配 Compass 樣式庫一同使用時。
特色
- 完全兼容 CSS3
- 在 CSS 語言基礎上添加了擴展功能，比如變量、嵌套 (nesting)、混合 (mixin)
- 對顏色和其它值進行操作的{Sass::Script::Functions 函數}
- 函數庫控制指令之類的高級功能
- 良好的格式，可對輸出格式進行定製
- 支持 Firebug
使用Sass
1、Sass有兩種擴展名
（1） .sass是一種sass新語法，跟css語法差別比較大，很難使用，跟stylus很像。
（2） .scss跟css語法很像，比較簡單，是最流行的一套語法。
2、安裝ruby
使用Sass需要先安裝ruby，查看是否安裝成功：ruby -v
ruby安裝成功，會提供一個gem指令，跟 node 中的 npm 一樣，是一個包管理工具，用gem -v查看：
然後安裝Sass：gem install sass
查看是否安裝成功：sass -v
3、配置中文註釋
Sass默認不支持中文註釋，所以我們要配置它
打開 D:\Ruby24-x64\lib\ruby\gems\2.4.0\gems\sass-3.5.6\lib\sass 目錄，編輯engine.rb 文件，在 55 行，添加如下這行代碼：
Encoding.default_external = Encoding.find('utf-8')
4、編譯Sass
瀏覽器不認識sass，需要編譯，有如下兩種編譯方式：
（1）、命令行編譯：
編譯結果：
sass sass文件 css文件 ：將sass的編譯結果，輸出到css文件中
編譯結果：
sass sass文件 css文件 配置：-c 避免輸出緩存
--sourcemap=none ：避免輸出 sourcemap 文件
備註： 命令行編譯可以快速的把sass文件編譯成css文件，但是編譯多個文件時成本較高，不適合投入生產。
（2）、工程化編譯 —— gulp編譯
首先將 gulp 及 gulp 的 sass 插件（gulp-ruby-sass）本地化：
在項目目錄新建一個 node_modules 文件夾 —— 在命令提示符輸入命令 npm link gulp 獲取 gulp —— 繼續輸入命令 npm link gulp-ruby-sass 獲取插件。
注意： sass這個插件有一個功能，可以用來獲取文件，所以我們在使用它的時候，就不用再使用src方法獲取文件了。參數就是文件的地址，返回值是文檔流對象，可以使用 pipe 方法。
gulp編譯實例：
新建一個HTML文件：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>gulp 編譯</title>
<link rel="stylesheet" type="text/css" href="dist/test.css" />
</head>
<body>
<div> <h1>sass文件</h1> </div>
</body>
</html>新建 test.scss文件：
div{
h1{
color: gold;
background: skyblue;
}
}新建 gulpfile.js 文件：
//引入模塊
var gulp = require('gulp');
var rubySass = require('gulp-ruby-sass');
//創建編譯任務
gulp.task('sass',function(){
//編譯sass
//rubySass可以獲取文件
rubySass('test.scss')
//編譯輸出到dest/test.css
.pipe(gulp.dest('dist'))
})
//啓動任務
gulp.task('default',['sass'])使用命令 gulp 運行：
運行後項目目錄結構：
運行結果：
