很多人從使用Scss的那一刻起，就被別人告訴了如何編譯。所以，基本上也就只會一種命令編譯方式。其實Scss提供了4種風格輸出CSS，以滿足更多人的需求。不同的輸出方式如下：

嵌套輸出方式 nested
展開輸出方式 expanded
緊湊輸出方式 compact
壓縮輸出方式 compressed

那么，以后就可以隨意的使用參數來生成自己喜歡的CSS風格。

1、nested

nested為嵌套輸出風格，即左花括號和CSS類名（第一行）齊行。右側花括號和最后一行齊行，不換行。

此風格一般使用較少，因為正常這樣寫CSS的人不多，風格比較別扭。

編譯命令為：

sass abc.scss:abc.css --style nested

生成結果：

.header {
background: #f00;
color: #000;
font-size: 20px; }
.sidebar {
float: left;
width: 300px;
height: 500px; }
.main {
float: right;
width: 800px;
padding: 20px;
min-height: 500px; }

2、expanded

expanded為展開輸出方式，也是一般前端開發直接寫CSS使用較多的一種風格。其左花括號和第一行齊行，不換行。右側的花括號在結尾處換行，另起一行。

編譯命令為：

sass abc.scss:abc.css --style expanded

生成結果：

.header {
background: #f00;
color: #000;
font-size: 20px;
}
.sidebar {
float: left;
width: 300px;
height: 500px;
}
.main {
float: right;
width: 800px;
padding: 20px;
min-height: 500px;
}

3、compact

compact為緊湊輸出方式，也是前端開發直接寫CSS使用較多的另外一種方式。其左花括號和右花括號均不換行。花括號內的CSS屬性值也不換行，一個接著一個寫。

對于比較喜歡寫單行CSS的朋友十分友好。

編譯命令為：

sass abc.scss:abc.css --style compact

生成結果：

.header { background: #f00; color: #000; font-size: 20px; }
.sidebar { float: left; width: 300px; height: 500px; }
.main { float: right; width: 800px; padding: 20px; min-height: 500px; }

4、compressed

compressed為壓縮輸出方式。其所有內容均不換行，而且會刪除所有注釋和空格。把所有代碼壓成一團。

一般在上線情況，或者完全不用閱讀修改CSS文件的情況下使用。文件會比較小。

編譯命令為：

sass abc.scss:abc.css --style compressed

生成結果：