當我們建立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 一次。
Post a comment