`sass`編譯有很多種方式，如命令行編譯模式、sublime插件`SASS-Build`、編譯軟件`koala`、前端自動化軟件`codekit`、Grunt打造前端自動化工作流`grunt-sass`、Gulp打造前端自動化工作流`gulp-ruby-sass`等。 ## 2\. 命令行編譯; ~~~ //單文件轉換命令 sass input.scss output.css //單文件監聽命令 sass --watch input.scss:output.css //如果你有很多的sass文件的目錄，你也可以告訴sass監聽整個目錄： sass --watch app/sass:public/stylesheets ~~~ ### 2-1\. 命令行編譯配置選項; 命令行編譯`sass`有配置選項，如編譯過后css排版、生成調試map、開啟debug信息等，可通過使用命令`sass -v`查看詳細。我們一般常用兩種`--style``--sourcemap`。 ~~~ //編譯格式 sass --watch input.scss:output.css --style compact //編譯添加調試map sass --watch input.scss:output.css --sourcemap //選擇編譯格式并添加調試map sass --watch input.scss:output.css --style expanded --sourcemap //開啟debug信息 sass --watch input.scss:output.css --debug-info ~~~ * `--style`表示解析后的`css`是什么排版格式; sass內置有四種編譯格式:`nested``expanded``compact``compressed`。 * `--sourcemap`表示開啟`sourcemap`調試。開啟`sourcemap`調試后，會生成一個后綴名為`.css.map`文件。 ### 2-2\. 四種編譯排版演示; ~~~ //未編譯樣式 .box { width: 300px; height: 400px; &-title { height: 30px; line-height: 30px; } } ~~~ ### nested 編譯排版格式 ~~~ /*命令行內容*/ sass style.scss:style.css --style nested /*編譯過后樣式*/ .box { width: 300px; height: 400px; } .box-title { height: 30px; line-height: 30px; } ~~~ ### expanded 編譯排版格式 ~~~ /*命令行內容*/ sass style.scss:style.css --style expanded /*編譯過后樣式*/ .box { width: 300px; height: 400px; } .box-title { height: 30px; line-height: 30px; } ~~~ ### compact 編譯排版格式 ~~~ /*命令行內容*/ sass style.scss:style.css --style compact /*編譯過后樣式*/ .box { width: 300px; height: 400px; } .box-title { height: 30px; line-height: 30px; } ~~~ ### compressed 編譯排版格式 ~~~ /*命令行內容*/ sass style.scss:style.css --style compressed /*編譯過后樣式*/ .box{width:300px;height:400px}.box-title{height:30px;line-height:30px} ~~~ ## 3\. 軟件方式編譯; 這里推薦[koala](http://koala-app.com/)&[codekit](http://incident57.com/codekit/),它們是優秀的編譯器，界面清晰簡潔，操作起來也非常簡單。鑒于koala是免費編譯器，簡單操作如下圖: