scss編譯輸出css四種格式
阿新 • • 發佈:2019-02-10
前面的已經安裝好了,那麼現在要如何開始呢?我們寫了一個scss檔案,然後如何去編譯它呢?
1:比如你在webstorm或者其它的IDE工具裡建立了一個sass檔案,叫index.scss,需要編譯成css檔案(index.css);
在當前目錄下,輸入命令
sass index.scss:index.css
sass是編譯,後面跟著要編譯的index.scss檔案,:冒號後面是要編譯成css的檔案(index.scss檔案前面可以是目錄如:你的index.scss檔案在main/index.scss目錄下,你可以寫成如下:)
sass main/index.scss:index .css
後面要編譯的css檔案也可以在前面加目錄,如下:注(如果編譯css前沒有建立你存放的目錄,你在編譯的時候,加了目錄會自動建立一個index.css主檔案到css目錄)
sass main/index.scss:css/index.css
2、通過watch監視命令,自動編譯scss檔案,輸入如下命令後,儲存檔案,即可對sass-lzf目錄下的scss檔案進行編譯,並且將css檔案輸出到css目錄下:如下
sass --watch sass-lzf:css
3、scss編譯輸出css有四種格式:
- nested(巢狀)
- compact(緊湊)
- expanded(擴充套件)
- compressed(壓縮)
1)nested(巢狀)預設的格式是nested巢狀的格式,巢狀格式如果出現子級樣式,會往右邊縮排
scss編譯時的樣式
如果預設使用巢狀輸出css
2)compact(緊湊)輸出格式,輸入如下命令:
sass --watch sass-lzf:css --style compact
scss編譯時的樣式
compact(緊湊)輸出css格式
3)expanded(擴充套件)輸出格式,輸入如下命令:
sass --watch sass-lzf:css --style expanded
scss編譯時的樣式
expanded(擴充套件)輸出css格式,這種格式便於閱讀,平時一般都是這種格式寫css
4)compresed(壓縮)輸出格式,輸入如下命令:
sass --watch sass-lzf:css --style compressed
scss編譯時的樣式
compressed(壓縮)輸出css格式,這種格式體積最小,一般用於釋出文件,最後輸出