sass編譯有很多種方式,如命令列編譯模式、編輯器自動編譯、編譯軟體koala、sass-loader等。
剛才我在test資料夾裡面已經建立了乙個style.scss檔案,現在我需要把這個檔案編譯成css檔案,那麼我可以先用命令列工具進入這個資料夾 「cd」就是進入某個資料夾的命令,後面跟上你電腦上資料夾的路徑就可以了:
利用命令還可以實時監測某個檔案,當這個檔案發生變化的時候,自動完成編譯過程cd test
進入資料夾之後再使用sass的編譯命令:
sass input.scss output.css
編譯成功不會有任何的提示,但是資料夾裡面馬上就會出現output.css這個檔案
這個input是原本的scss檔案的名稱,然後output是編譯出來之後的css檔案的名稱,這個名稱大家可以隨意,保持基本命名規則就可以了
利用命令還可以實時監測某個資料夾,這個資料夾下的所有scss檔案都會被監聽//單檔案監聽命令
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
前面的targetfolder是要監聽的目標資料夾,後面的outputfolder是要輸出的資料夾。 比如我想把css資料夾裡的scss檔案編譯到style資料夾裡,就可以這樣寫:sass --watch targetfolder:outputfolder
在監聽成功之後會列印以下**:
>>> sass is watching for changes. press ctrl-c to stop.
sass --watch css:style
在這裡要注意一點:這個時候你需要在css和style資料夾的共同父級資料夾裡面才能開啟這個功能,否則會報錯
在編譯的時候,還可以配合編譯選項,用於調整輸出檔案
sass提供四種編譯格式:
看看區別:
nested 編譯排版格式//未編譯樣式
.box
}
expanded 編譯排版格式/*命令列內容*/
sass style.scss:style.css --style nested
/*編譯過後樣式*/
.box
.box-title
compact 編譯排版格式/*命令列內容*/
sass style.scss:style.css --style expanded
/*編譯過後樣式*/
.box
.box-title
compressed 編譯排版格式/*命令列內容*/
sass style.scss:style.css --style compact
/*編譯過後樣式*/
.box
.box-title
不同的編譯格式得到的**其實是一樣的,只是排版格式不同,大家看情況去用就好了。我的建議是,開發的時候用expanded格式,比較清楚。當你需要發布你的**的時候,使用compressed格式,這個格式會讓css檔案相對較小。/*命令列內容*/
sass style.scss:style.css --style compressed
/*編譯過後樣式*/
.box.box-title
sass編譯命令
sass編譯乙個檔案的方式 sass xx.scss xx.css 這種方式只能編譯一次,要是想一直監控編譯,只要有儲存更改就會立即編譯,那麼就需要下面這條命令了 sass watch xx.scss xx.css watch 就是監控檔案的改動進行編譯 那麼又來了,如果我想編譯多個sass檔案怎麼...
Sass教程二 Sass的安裝
前面已經提到了,sass是用ruby語言開發的,所以在安裝sass之前,需要先安裝ruby ruby安裝好了之後,我們就可以利用ruby的包管理工具gem安裝sass了,同樣還是在cmd裡執行以下命令 gem install sass安裝完成之後,還是老辦法檢查以下安裝是否成功 sass v 如果安...
Sass學習筆記 Sass的編譯
命令列編譯 gui 介面工具編譯 一般教程 ide自助編譯 webstorm設定 點選左上角的file settings file watchers 在彈窗的視窗的右上角點選綠色的 號,然後選擇scss arguments 配置編譯後的檔案的輸出路徑 四種編譯後css樣式 這裡有一段scss 巢狀輸...