sass編譯

時間 2019-12-04

標籤 sass 編譯简体版

原文原文鏈接

sass編譯

命令行編譯

單文件轉換命令css

sass style.scss style.css

單文件監聽命令html

sass --watch style.scss:style.css

文件夾監聽命令git

sass --watch sassFileDirectory:cssFileDirectory

css文件轉成sass/scss文件（在線轉換工具css2sass）github

sass-convert style.css style.sass   
sass-convert style.css style.scss

命令行其餘配置選項

運行命令行幫助文檔，能夠得到全部的配置選項web

sass -h

咱們通常經常使用的有--style，--sourcemap，--debug-info等。sass

sass --watch style.scss:style.css --style compact sass --watch style.scss:style.css --sourcemap sass --watch style.scss:style.css --style expanded --sourcemap sass --watch style.scss:style.css --debug-info

--style表示解析後的css是什麼格式，有四種取值分別爲：nested，expanded，compact，compressed。
--sourcemap表示開啓sourcemap調試。開啓sourcemap調試後，會生成一個後綴名爲.css.map文件。
--debug-info表示開啓debug信息，升級到3.3.0以後由於sourcemap更高級，這個debug-info就不太用了。

四種style生成後的css

// nested #main { color: #fff; background-color: #000; } #main p { width: 10em; } .huge { font-size: 10em; font-weight: bold; text-decoration: underline; } // expanded #main { color: #fff; background-color: #000; } #main p { width: 10em; } .huge { font-size: 10em; font-weight: bold; text-decoration: underline; } // compact #main { color: #fff; background-color: #000; } #main p { width: 10em; } .huge { font-size: 10em; font-weight: bold; text-decoration: underline; } // compressed #main{color:#fff;background-color:#000}#main p{width:10em}.huge{font-size:10em;font-weight:bold;text-decoration:underline}