如何修改Sass的輸出樣式

在網站的開發階段、我們通常會將CSS樣式表展開、方便查找代碼。但是當網站要正式上線的時候、我們又要將CSS檔案最小化、減少檔案大小。在以往單純使用CSS開發時、我們也許會使用一些線上工具幫忙轉檔，現在我們使用SASS開發、只要修改專案的設定、馬上就能變更輸出的樣式。

 

Sass 共有四種輸出樣式

:nested

:compact

:expanded

:compressed

 

底下我們直接以一段代碼做示範。

SCSS

.well {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border: 1px solid darken(#f5f5f5, 7%);
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
  blockquote {
    border-color: #ddd;
    border-color: rgba(0,0,0,.15);
  }
}

output_style = :expanded

.well {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
}
.well blockquote {
  border-color: #ddd;
  border-color: rgba(0, 0, 0, 0.15);
}

output_style = :nested

.well {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  border-radius: 4px; }
  .well blockquote {
    border-color: #ddd;
    border-color: rgba(0, 0, 0, 0.15); }

output_style = :compact

.well { min-height: 20px; padding: 19px; margin-bottom: 20px; background-color: #f5f5f5; border: 1px solid #e3e3e3; border-radius: 4px; }
.well blockquote { border-color: #ddd; border-color: rgba(0, 0, 0, 0.15); }

 output_style = :compressed

.well{min-height:20px;padding:19px;margin-bottom:20px;background-color:#f5f5f5;border:1px solid #e3e3e3;border-radius:4px}.well blockquote{border-color:#ddd;border-color:rgba(0,0,0,0.15)}