當我們建立Sass專案之後，在專案資料夾裡會產生一個config.rb檔案。這個檔案就是Sass專案的設定檔。在這個設定檔裡、我們除了指定一些資料夾的路徑(CSS, images, javascript…)，還可以修改CSS輸出模式、開啟或關閉註解提示功能，以及將絕對路徑更改為相對路徑。

★ 每次修改config.rb後，都必須要先停止 watch 專案，接著再重新 watch 一次。

Sass預設設定檔

變更預設資料夾名稱

修改資料夾名稱非常簡單，以CSS資料夾為例，預設值是：

css_dir = "stylesheets"

我們可以將他修改成自己想要的資料夾名稱，例如：

css_dir = "css"

 

修改CSS輸出模式

在開發網站的時候，我習慣將CSS展開，比較容易查看。

不過在網站正式上線之前，為了減少檔案大小，我通常會將CSS壓縮一下(CSS minify)。但是壓縮過後的CSS”

很難看”，之後的維護會變得很傷眼力。

不過如果使用Sass開發的話、這問題就迎刃而解了。只要修改輸出模式的設定，就可以輕易的壓縮或展開CSS

。另一個使用Sass的好處是：寫在”//”以後的註解並不會輸出到CSS檔去、完全不用擔心註解太多、讓CSS檔

案變得肥大。

Sass提供了四種輸出模式：

• :expanded
• :nested
• :compact
• :compressed

以下直接以簡單的例子做示範：

Sass

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

.well-lg {
  padding: 24px;
  border-radius: 5px;
}
.well-sm {
  padding: 9px;
  border-radius:3px;
}

---

output_style = :expanded

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

.well-lg {
  padding: 24px;
  border-radius: 5px;
}

.well-sm {
  padding: 9px;
  border-radius: 3px;
}

---

output_style = :nested

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

.well-lg {
  padding: 24px;
  border-radius: 5px; }

.well-sm {
  padding: 9px;
  border-radius: 3px; }

---

output_style = :compact

.well { min-height: 20px; padding: 19px; margin-bottom: 20px; background-color: #f5f5f5; 

border: 1px solid #cccccc; border-radius: 4px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); }
.well blockquote { border-color: #ddd; border-color: rgba(0, 0, 0, 0.15); }

.well-lg { padding: 24px; border-radius: 5px; }

.well-sm { padding: 9px; border-radius: 3px; }

---

output_style = :compressed

.well{min-height:20px;padding:19px;margin-bottom:20px;background-color:#f5f5f5;border:1px solid #cccccc;border-radius:4px;box-shadow:0 1px 1px rgba(0,0,0,0.05)}.well blockquote{border-color:#ddd;border-color:rgba(0,0,0,0.15)}.well-lg{padding:24px;border-radius:5px}.well-sm{padding:9px;border-radius:3px}

---

關閉註解提示功能

註解提示功能在預設的狀況下是開啟的，在開發的階段這個提示功能十分好用，但網站上線之後、這個提示就顯得很佔空間了。如果想要關閉他的話，只要加上底下這一行就可以了：

line_comments = false

將絕對路徑更改為相對路徑

在預設的情況下，如果使用了與 image-url() 相關的 Compass helper 時，輸出的 CSS 檔案中會使用絕對路徑。如果想要變更為相對路徑時，就要加上底下這一行：

relative_assets = true

★再次提醒，每次修改config.rb後，都必須先停止 watch 專案，接著再重新 watch 一次。