SCSS 的編譯

編譯是將SCSS程式碼轉換成CSS程式碼，畢竟瀏覽器看不懂SCSS程式碼。

下面就分步介紹一下如何實現編譯功能。

假設我們的SCSS程式碼儲存在D盤的antzone/sass目錄下。首先進入cmd命令列工具，輸入d:命令進入D盤:

然後切換到antzone目錄下，操作圖示如下:

將SASS目錄下的scss.scss檔案編譯成名稱為style.css檔案，並存放在css目錄下:

[Shell] 純文字檢視 複製程式碼
sass sass\sass.scss css\style.css

單檔案監聽，也就是隻要SCSS檔案程式碼被修改，那麼就會立馬編譯到指定檔案:

[Shell] 純文字檢視 複製程式碼
sass --watch sass\sass.scss:css\style.css

其實也可以監聽整個目錄:

[Shell] 純文字檢視 複製程式碼
sass --watch sass:css

css檔案轉成sass/scss檔案:

[Shell] 純文字檢視 複製程式碼
sass-convert css\style.css sass\style.sass   
sass-convert css\style.css sass\style.scss

編譯成的css程式碼的格式也是可以配置的:

[Shell] 純文字檢視 複製程式碼
sass --watch sass\sass.scss:css\style.css --style compact

style後跟的參數列示編譯成的css的格式:

（1）.nested:

[CSS] 純文字檢視 複製程式碼
@media print {
  .parent {
    color: red; }
    .child {
      width: 200px;
      height: 50px; } }

（2）.expanded:

[CSS] 純文字檢視 複製程式碼
@media print {
  .parent {
    color: red;
  }
  .child {
    width: 200px;
    height: 50px;
  }
}

（3）.compact:

[CSS] 純文字檢視 複製程式碼
@media print { .parent { color: red; }
  .child { width: 200px; height: 50px; } }

（4）.compressed:

[CSS] 純文字檢視 複製程式碼
@media print{.parent{color:red}.child{width:200px;height:50px}}

還有很多前端開發工具帶有編譯功能，這裡就不多介紹了。