編譯SASS

編譯SASS

sass編譯有不少種方式，如命令行編譯模式、sublime插件SASS-Build、編譯軟件koala、前端自動化軟件codekit、Grunt打造前端自動化工做流grunt-sass、Gulp打造前端自動化工做流gulp-ruby-sass等。

2. 命令行編譯;

//單文件轉換命令 sass input.scss output.css //單文件監聽命令 sass --watch input.scss:output.css //若是你有不少的sass文件的目錄，你也能夠告訴sass監聽整個目錄： sass --watch app/sass:public/stylesheets 

2-1. 命令行編譯配置選項;

命令行編譯sass有配置選項，如編譯事後css排版、生成調試map、開啓debug信息等，可經過使用命令sass -v查看詳細。咱們通常經常使用兩種--style--sourcemap。

//編譯格式 sass --watch input.scss:output.css --style compact //編譯添加調試map sass --watch input.scss:output.css --sourcemap //選擇編譯格式並添加調試map sass --watch input.scss:output.css --style expanded --sourcemap //開啓debug信息 sass --watch input.scss:output.css --debug-info 

• --style表示解析後的css是什麼排版格式;
  sass內置有四種編譯格式:nestedexpandedcompactcompressed。
• --sourcemap表示開啓sourcemap調試。開啓sourcemap調試後，會生成一個後綴名爲.css.map文件。

2-2. 四種編譯排版演示;

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

3. 軟件方式編譯;

這裏推薦koala&codekit,它們是優秀的編譯器，界面清晰簡潔，操做起來也很是簡單。鑑於koala是免費編譯器，簡單操做以下圖: