Sass的四種編譯方式

　　Sass環境搭建，詳情見另一篇博文 安裝Ruby、Sass與Compass

　　我們都知道Sass其實有兩種，一種是Sass，一種是SCSS。

　　Sass 和 SCSS 其實是同一種東西，我們平時都稱之為 Sass，兩者之間不同之處有以下兩點：

1. 文件擴展名不同，Sass 是以“.sass”后綴為擴展名，而 SCSS 是以“.scss”后綴為擴展名
2. 語法書寫方式不同，Sass 是以嚴格的縮進式語法規則來書寫，不帶大括號({})和分號(;)，而 SCSS 的語法書寫和我們的 CSS 語法書寫方式非常類似。

　　今天我要講的SCSS編譯方式是命令編譯方式，在命令編譯方式中有不同樣式風格的輸出方法。分別是

1. 嵌套輸出方式 nested
2. 展開輸出方式 expanded  
3. 緊湊輸出方式 compact 
4. 壓縮輸出方式 compressed

　　

　　例如 style.scss文件的代碼如下，現要通過以上四種方式來編譯：　

@charset "utf-8";
#box{
 width:400px; height:400px; border:1px solid gray; h1{ font-size:22px; color:red; } p{ font-size:18px; color:green; } }

 

　　

　　（1）、nested(嵌套輸出)方式：　

　　現在要將其編譯成style.css文件。

　　命令為： sass style.scss:style1.css --style nested 

　　編譯后代碼如下：　

#box {
  width: 400px;
  height: 400px;
  border: 1px solid gray; }
  #box h1 {
    font-size: 22px;
    color: red; }
  #box p {
    font-size: 18px;
    color: green; }

　　可以看到代碼行間還是有一定的縮進的。

 

　　（2）、expanded(展開輸出)方式

　　同樣是style.scss文件將其編譯為style1.css文件。

　　命令為： sass style.scss:style1.css --style expanded 

　　編譯后代碼為：　

#box {
  width: 400px;
  height: 400px;
  border: 1px solid gray;
}
#box h1 {
  font-size: 22px;
  color: red;
}
#box p {
  font-size: 18px;
  color: green;
}

　　可以看出編譯后和css的書寫規則是一樣的。

 

　　（3）、compact(緊湊輸出)方式。

　　將style.scss文件編譯成style2.css文件。

　　命令為： sass style.scss:style2.css --style compact 

　　編譯后結果為：

#box { width: 400px; height: 400px; border: 1px solid gray; }
#box h1 { font-size: 22px; color: red; }
#box p { font-size: 18px; color: green; }

　　

　　（4）、compressed(壓縮輸出)方式。

　　將style.scss文件編譯成style3.css文件。

　　命令為： sass style.scss:style3.css --style compressed 

　　編譯后結果為：

　　 #box{width:400px;height:400px;border:1px solid gray}#box h1{font-size:22px;color:red}#box p{font-size:18px;color:green}