簡單究好 Simple is Best

網頁前端開發資訊

Sass 專案的基本設定

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

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

Sass預設設定檔 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

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *