編譯sass

sass編譯有很多種方式，如命令行編譯模式、sublime插件SASS-Build、編譯軟件koala、前端自動(dòng)化軟件codekit、Grunt打造前端自動(dòng)化工作流grunt-sass、Gulp打造前端自動(dòng)化工作流gulp-ruby-sass等。

2. 命令行編譯;

//單文件轉(zhuǎn)換命令
sass input.scss output.css

//單文件監(jiān)聽命令
sass --watch input.scss:output.css

//如果你有很多的sass文件的目錄，你也可以告訴sass監(jiān)聽整個(gè)目錄：
sass --watch app/sass:public/stylesheets

2-1. 命令行編譯配置選項(xiàng);

命令行編譯sass有配置選項(xiàng)，如編譯過后css排版、生成調(diào)試map、開啟debug信息等，可通過使用命令sass -v查看詳細(xì)。我們一般常用兩種--style``--sourcemap。

//編譯格式
sass --watch input.scss:output.css --style compact

//編譯添加調(diào)試map
sass --watch input.scss:output.css --sourcemap

//選擇編譯格式并添加調(diào)試map
sass --watch input.scss:output.css --style expanded --sourcemap

//開啟debug信息
sass --watch input.scss:output.css --debug-info

• --style表示解析后的css是什么排版格式;
  sass內(nèi)置有四種編譯格式:nested``expanded``compact``compressed。
• --sourcemap表示開啟sourcemap調(diào)試。開啟sourcemap調(diào)試后，會生成一個(gè)后綴名為.css.map文件。

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

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

nested 編譯排版格式

/*命令行內(nèi)容*/
sass style.scss:style.css --style nested

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

expanded 編譯排版格式

/*命令行內(nèi)容*/
sass style.scss:style.css --style expanded

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

compact 編譯排版格式

/*命令行內(nèi)容*/
sass style.scss:style.css --style compact

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

compressed 編譯排版格式

/*命令行內(nèi)容*/
sass style.scss:style.css --style compressed

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

3. 軟件方式編譯;

這里推薦koala&codekit,它們是優(yōu)秀的編譯器，界面清晰簡潔，操作起來也非常簡單。鑒于koala是免費(fèi)編譯器，簡單操作如下圖: