本文作者：開課吧無憂
圖文編輯：開三金

sass編譯有很多種方式，如命令行編譯模式、編輯器自動編譯、編譯軟件koala、sass-loader等。

今天我們就先來看第一種：命令行編譯

剛才我在test文件夾里面已經建立了一個style.scss文件，現在我需要把這個文件編譯成css文件，那么我可以先用命令行工具進入這個文件夾?

“cd”就是進入某個文件夾的命令，后面跟上你電腦上文件夾的路徑就可以了：

cd test進入文件夾之后再使用sass的編譯命令:sass input.scss output.css編譯成功不會有任何的提示，但是文件夾里面馬上就會出現output.css這個文件這個input是原本的scss文件的名稱，然后output是編譯出來之后的css文件的名稱，這個名稱大家可以隨意，保持基本命名規則就可以了

利用命令還可以實時監測某個文件，當這個文件發生變化的時候，自動完成編譯過程

//單文件監聽命令sass --watch input.scss:output.css  在監聽成功之后會打印以下代碼：>>> Sass is watching for changes. Press Ctrl-C to stop.根據提示，這時候按Ctrl + C可以停止這個命令在監聽的過程中如果文件發生改變，并且自動編譯成功則會打印以下代碼：>>> Change detected to: tests.scss  write output.css  write output.css.map

利用命令還可以實時監測某個文件夾，這個文件夾下的所有scss文件都會被監聽

sass --watch targetFolder:outputFolder在監聽成功之后會打印以下代碼:>>> Sass is watching for changes. Press Ctrl-C to stop.

前面的targetFolder是要監聽的目標文件夾，后面的outputFolder是要輸出的文件夾。?

比如我想把css文件夾里的scss文件編譯到style文件夾里，就可以這樣寫：

sass --watch css:style

在這里要注意一點：這個時候你需要在css和style文件夾的共同父級文件夾里面才能開啟這個功能，否則會報錯

在編譯的時候，還可以配合編譯選項，用于調整輸出文件

sass提供四種編譯格式：

nested

expanded

compact

compressed

看看區別：

//未編譯樣式.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}

不同的編譯格式得到的代碼其實是一樣的，只是排版格式不同，大家看情況去用就好了。我的建議是，開發的時候用expanded格式，比較清楚。

當你需要發布你的代碼的時候，使用compressed格式，這個格式會讓css文件相對較小。

你“在看”我嗎？