4種靈活的Scss編譯輸出風格整理

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

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

那麼，之後就能夠隨意的使用參數來生成本身喜歡的CSS風格。

來一個導航推薦，筆點網址導航 - 用心作最簡潔的網址導航

一、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; }

二、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;
}

三、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; }

四、compressed

compressed爲壓縮輸出方式。其全部內容均不換行，並且會刪除全部註釋和空格。把全部代碼壓成一團。

通常在上線狀況，或者徹底不用閱讀修改CSS文件的狀況下使用。文件會比較小。

編譯命令爲：

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

生成結果：

.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}