一、Sass安裝（windows版）：
1.Ruby 的官網(wǎng)（http://rubyinstaller.org/downloads）下載對(duì)應(yīng)需要的 Ruby 版本
2.建議將其安裝在 C 盤(pán)下趋箩，在安裝過(guò)程中選擇第二個(gè)選項(xiàng)（不選中赃额，就會(huì)出現(xiàn)編譯時(shí)找不到Ruby環(huán)境的情況）
3.Ruby 安裝完成后加派，在開(kāi)始菜單中找到新安裝的 Ruby，并啟動(dòng) Ruby 的 Command 控制面板跳芳。
4.接下來(lái)就可以安裝 Sass 了芍锦。同樣的在windows下安裝 Sass 有多種方法。
方法1：打開(kāi)電腦的命令終端飞盆，輸入下面的命令gem install sass
方法2：通過(guò) Compass 來(lái)安裝 Sass
方法3：本地安裝 Sass
其他方法
5.命令終端輸入sass -v即可查看是否安裝成功
6.更新 Sass 命令終端輸入??gem update sass
二娄琉、卸載（刪除）Sass
1.gem uninstall sass??這樣就卸載了 Sass ，但這行命令基本上是使用不上吓歇。
三孽水、sass的語(yǔ)法格式
Sass 語(yǔ)法是 Sass 的最初語(yǔ)法格式，他是通過(guò) tab 鍵控制縮進(jìn)的一種語(yǔ)法規(guī)則城看，而且這種縮進(jìn)要求非常嚴(yán)格女气。另外其不帶有任何的分號(hào)和大括號(hào)。常常把這種格式稱(chēng)為 Sass 老版本测柠，其文件名以“.sass”為擴(kuò)展名炼鞠。
注：這種語(yǔ)法格式對(duì)于前端人員都不太容易接受，而且容易出錯(cuò)轰胁。
so
SCSS 是 Sass 的新語(yǔ)法格式谒主，從外形上來(lái)判斷他和 CSS 長(zhǎng)得幾乎是一模一樣，代碼都包裹在一對(duì)大括號(hào)里软吐，并且末尾結(jié)束處都有一個(gè)分號(hào)瘩将。其文件名格式常常以“.scss”為擴(kuò)展名。
注意：不管是 Sass 的語(yǔ)法格式還是 SCSS 的語(yǔ)法格式凹耙，他們的功能都是一樣的姿现，不同的是其書(shū)寫(xiě)格式和文件擴(kuò)展名不同。
一般都喜歡用新的語(yǔ)法規(guī)則肖抱，即SCSS，“.scss”使用的是 Sass 的新語(yǔ)法規(guī)則意述，也就是 SCSS 語(yǔ)法規(guī)則（類(lèi)似 CSS 語(yǔ)法格式）。
四荤崇、編譯
注意：在項(xiàng)目中還是引用“.css”文件??另外新建sass文件夾裝.scss文件
1.命令編譯:
單文件編譯:
sass <要編譯的Sass文件路徑>/style.scss:<要輸出CSS文件路徑>/style.css
多文件編譯：
sass sass/:css/? ?表示將項(xiàng)目中“sass”文件夾中所有“.scss”(“.sass”)文件編譯成“.css”文件拌屏，并且將這些 CSS 文件都放在項(xiàng)目中“css”文件夾中术荤。
缺點(diǎn)及解決方法：
在實(shí)際編譯過(guò)程中，你會(huì)發(fā)現(xiàn)上面的命令瓣戚，只能一次性編譯端圈。每次個(gè)性保存“.scss”文件之后，都得重新執(zhí)行一次這樣的命令舱权。如此操作太麻煩，其實(shí)還有一種方法宴倍，就是在編譯 Sass 時(shí)张症，開(kāi)啟“watch”功能啊楚，這樣只要你的代碼進(jìn)行任保修改，都能自動(dòng)監(jiān)測(cè)到代碼的變化恭理，并且給你直接編譯出來(lái)：
sass --watch <要編譯的Sass文件路徑>/style.scss:<要輸出CSS文件路徑>/style.css
例如：sass --watch sass/bootstrap.scss:css/bootstrap.css
2、GUI 界面工具編譯 推薦
（1）Koala (http://koala-app.com/)? ?? ?(http://www.w3cplus.com/preprocessor/sass-gui-tool-koala.html)
（2）CodeKit（https://incident57.com/codekit/index.html）(http://www.w3cplus.com/preprocessor/sass-gui-tool-codekit.html)
3颜价、自動(dòng)化編譯
（1）Grunt 配置 Sass 編譯的示例代碼
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
sass: {
? ? ? ? ? ? ? ?dist: {
? ? ? ? ? ? ? ? ? ? ? ?files: {
? ? ? ? ? 'style/style.css' : 'sass/style.scss'
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ? ? }
? ? ? ? ? ?},
? ? ? ? ? ? ? watch: {
? ? ? ? ? ? ? ? ? ? ? ? css: {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? files: '**/*.scss',
? ? ? ? ? ? ? ? ? ? ? ?tasks: ['sass']? ?? ?? ?? ?}
? ? ? ? ? ? ? ? ? ? ? ? }
});
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default',['watch']);
}
（2）Gulp 配置 Sass 編譯的示例代碼
var gulp = require('gulp');
var sass = require('gulp-sass');
? ? ? ? ? ? ? ? ? ? ?gulp.task('sass', function () {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?gulp.src('./scss/*.scss')
? ? ? ? ? ? ? ? ? ? . pipe(sass())
? ? ? ? ? ? ? ? ? ? ? .pipe(gulp.dest('./css'));
? ? ? ? ? ? ? ? ? ? });
? ? ? ? ? gulp.task('watch', function() {
? ? ? ? ? ? ? ? ? ? gulp.watch('scss/*.scss', ['sass']);
? ? ? ? ? ? ? });
gulp.task('default', ['sass','watch']);
五诉濒、常見(jiàn)的編譯錯(cuò)誤
最為常見(jiàn)的一個(gè)錯(cuò)誤就是字符編譯引起的。在Sass的編譯的過(guò)程中未荒，是不是支持“GBK”編碼的专挪。所以在創(chuàng)建 Sass 文件時(shí)，就需要將文件編碼設(shè)置為“utf-8”寨腔。
另外一個(gè)錯(cuò)誤就是路徑中的中文字符引起的。建議在項(xiàng)目中文件命名或者文件目錄命名不要使用中文字符率寡。而至于人為失誤造成的編譯失敗，在編譯過(guò)程中都會(huì)有具體的說(shuō)明冶共，大家可以根據(jù)編譯器提供的錯(cuò)誤信息進(jìn)行對(duì)應(yīng)的修改。
