sass

Scss旅程(7) – config.rb

看完上一個旅程,目前各位應該都可以自己手動開個compass專案了吧!

但開歸開,看著專案「自動(使用compass watch)」產生的css檔,再看看網站開啟的速度,會不會有「喔要是css檔會自動壓縮就好了」這種想法呢?

有的話,恭喜你!本週要介紹的config.rb檔(Windows的用戶應該看不到.rb這個副檔名,除非隱藏副檔名是關閉的)就可以幫工程師們達成這個要求,而且一點都不難!

1.config.rb

config.rb,或是compress.rb,是compass的設定檔,用來設定compass專案的sass與css檔案該放在哪,編譯好的css檔案是哪一種格式等等。在專案製作過程中大多都會加減修改這個檔案。

在開始介紹內容前先說明一件很重要的事,修改完config.rb後,如果是使用「compass watch」編譯scss檔案的話,記得關掉再重開一次「compass watch」,這樣設定才會生效喔。

好,那麼延續上週的專案,首先先打開config資料夾裡的compass.rb,如果發現沒這東西,倒是外層有一個檔案叫config.rb,別懷疑,本週重點檔案就是他,只是名字不一樣而已,安心打開它吧。

打開後檔案內容是這樣:

compass-config-rb
[圖一]config.rb
大致看下來內容可以分為三大部分,以下就一個一個介紹。

1.1.關於scss和css檔案的存放位置

  1. http_path = “/” #檔案根目錄位置
  2. css_dir = “stylesheets” #編譯完的css檔案存放的資料夾名稱
  3. sass_dir = “sass” #scss或sass存放的資料夾名稱
  4. images_dir = “images” #圖片存放的資料夾名稱
  5. javascripts_dir = “javascripts” #js檔案存放的資料夾名稱

以上皆為預設值,無論是使用「compass init」或「compass create」甚至是使用「compass config」產生的config檔一定都長這樣。

若跳進scss坑時專案已經存在甚至已經正式運行一段不小的時間的話,在正式開始編譯scss檔案之前,記得先修改這部分的設定,確定資料夾名稱無誤。

Q. 若資料夾名稱錯誤會怎樣嗎?

A. 嗚某貓沒試過,不過沒意外應該是直接產生一個跟設定一樣名稱的資料夾。

Q. 可以設定已存在的資料夾嗎?像是把css_dir的stylesheet改成專案裡已存在的css?

A. 可以的,絕對可以的!

1.2.關於編譯完的css檔案

  1. # You can select your preferred output style here (can be overridden via the command line):
  2. # output_style = :expanded or :nested or :compact or :compressed

第二部分主要是這被註解的兩行,用途是設定編譯完的css樣式。說樣式可能有點難理解⋯⋯恩一般的css檔大多都是展開式,就是不會全部的設定都黏在一行,該換行就換行,該縮行就縮行,為了工程師的眼睛和精神上的安定,這點簡單的樣式設定請務必養成習慣(認真

展開式好處是維護上比較輕鬆,至少眼睛不會那麼累。但在網站效能上可就不是那麼好了。對於網頁效能而言,壓縮式比展開式好很多,畢竟省了一點檔案容量。

針對這點,compass很善解人意,只要在這兩行動點手腳,要壓縮還是要展開任君選擇!喔其實要動的只有第二行,甚至兩行都不動新開一行也行。

設定的語法就這樣:output_style = :xxxxxxx

而那堆xxxxxx可以分成四種:

output_style = :expanded:展開式,一般最常見的樣式

output-style-expanded
[圖二]css : expanded
output_style = :nested:巢狀結構,跟展開式比起來,行與行間沒有空行,結尾的大括號也不會自己占一行

output-style-nested
[圖三]css : nested
output_style = :compact:簡易壓縮式(自創名詞)

output-style-compact
[圖四]css : compact
output_style = :compressed:壓縮式,雖然程式只有一個a看不出所以然,但程式碼一多時就會全部擠在同一行,就像js檔案常見的.min.js一樣。

output-style-compressed
[圖五]css : compressed

1.3.註解

與第三部分相關的是這兩行:

  1. # To disable debugging comments that display the original location of your selectors. Uncomment:
  2. # line_comments = false

一般css檔案接受的註解為「/**/」,而scss/sass檔案除了接受「/**/」也接受「//」

經過編譯後,可以看到原先在scss檔案內「//」的註解到了css檔案不見了,而「/**/」的註解還留著,甚至還多了一行scss檔案裡沒出現的註解。

command-01
[圖六]註解比對
這兩行的設定,就是關於那「css檔案裡多出來的註解」。設定也很簡單,把那兩行的第二行前面的井字符號去除就行了,也就是line_commends = false前面的井號。

若覺得註解開啟也行,就加回井字號,或是把false 改成 true也行。

基本上一般專案使用的話注意這三個部分的設定就行了,其他功能目前某貓還沒用到,若有機會使用再介紹吧!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.