本文作者：開課吧無(wú)憂
圖文編輯：開三金

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

今天我們就先來(lái)看第一種：命令行編譯

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

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

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

利用命令還可以實(shí)時(shí)監(jiān)測(cè)某個(gè)文件，當(dāng)這個(gè)文件發(fā)生變化的時(shí)候，自動(dòng)完成編譯過(guò)程

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

利用命令還可以實(shí)時(shí)監(jiān)測(cè)某個(gè)文件夾，這個(gè)文件夾下的所有scss文件都會(huì)被監(jiān)聽

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

前面的targetFolder是要監(jiān)聽的目標(biāo)文件夾，后面的outputFolder是要輸出的文件夾。?

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

sass --watch css:style

在這里要注意一點(diǎn)：這個(gè)時(shí)候你需要在css和style文件夾的共同父級(jí)文件夾里面才能開啟這個(gè)功能，否則會(huì)報(bào)錯(cuò)

在編譯的時(shí)候，還可以配合編譯選項(xiàng)，用于調(diào)整輸出文件

sass提供四種編譯格式：

nested

expanded

compact

compressed

看看區(qū)別：

//未編譯樣式.box {width: 300px;height: 400px;&-title {height: 30px;line-height: 30px;}}

nested 編譯排版格式

/*命令行內(nèi)容*/sass style.scss:style.css --style nested/*編譯過(guò)后樣式*/.box {width: 300px;height: 400px; }.box-title {height: 30px;line-height: 30px; }

expanded 編譯排版格式

/*命令行內(nèi)容*/sass style.scss:style.css --style expanded/*編譯過(guò)后樣式*/.box {width: 300px;height: 400px;}.box-title {height: 30px;line-height: 30px;}

compact 編譯排版格式

/*命令行內(nèi)容*/sass style.scss:style.css --style compact/*編譯過(guò)后樣式*/.box { width: 300px; height: 400px; }.box-title { height: 30px; line-height: 30px; }

compressed 編譯排版格式

/*命令行內(nèi)容*/sass style.scss:style.css --style compressed /*編譯過(guò)后樣式*/.box{width:300px;height:400px}.box-title{height:30px;line-height:30px}

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

當(dāng)你需要發(fā)布你的代碼的時(shí)候，使用compressed格式，這個(gè)格式會(huì)讓css文件相對(duì)較小。

你“在看”我嗎？

總結(jié)

以上是生活随笔為你收集整理的28和lba48命令格式区别_编译Sass（命令行）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。