sass

Scss旅程(6) – compass專案

在了解compass與sass並安裝完它們後,接著就是實作的時候啦!本篇文章將會介紹不同狀況下如何初始化一個compass專案,所以別擔心「唉我的專案不是新專案這樣也可以嗎?」,可以的!這就是今天會介紹到的其中一種狀況喔。

1.先看看專案狀態

一般來說要/想在專案裡使用Ssss不外乎有幾種狀況:

  1. 專案剛要動工時
  2. 專案需要開始刻CSS時
  3. 專案動到一半,CSS也已經刻了不少眼睛開始有點花時
  4. 當專案結束後某一天的維護發現CSS的維護真他喵的眼花跟豆頁痛時
  5. 當專案準備正式上線開始壓縮js檔和css檔時
  6. 在用border-radius或opacity時悲催的發現某些瀏覽器或某些瀏覽器舊版本沒反應時
  7. (待補充

基本上某貓一到六點都遇過了,但真正想跳這大坑的原因,大概應該是四?說應該是因為,讓某貓眼花的檔案不是此時某貓正在進行的專案,而是某個去年的黑歷史。

……那真的是個黑歷史阿(望天),今日的眼睛痛都是上周程式沒寫好的錯嗚嗚嗚。

那慘不忍睹的程式到底是誰寫的啊啊好像就是我!!

為了讓更多剛要開始專案的人不要走上那黑暗的道路,我決定當盞明燈橫在各位面前指引各位了(發亮

針對那幾種狀況,整合下來可以縮減為:

  1. 專案內容一片空白時
  2. 專案已有內容物,可能已經有CSS檔案

恩基本上就是這兩種了,以下將針對這兩種狀況進行創立compass專案的教學。

2.新專案:專案內容一片空白時

當專案一片空白,什麼都沒有時,與其手動慢慢加SCSS檔案和資料夾,不如將這些步驟交給Compass,一行指令,全部搞定!

首先先打開終端機(Windows為命令提示字元,俗稱的cmd),將目錄移動到專案資料夾。就範例而言,資料夾「test1」位於XAMPP裡的htdocs裡的話:

Mac:

  1. $ cd /Applications/XAMPP/xamppfiles/htdocs/test1

Windows:

  1. > cd C:/xampp/htdocs/test1

如果樓上的Windows指令沒反應,改用:

  1. > cd /d c:/xampp/htdocs/test1

當然實際上真正的位置還要看各位的專案放置點,這邊只是取個範例。

如果找到專案放置點但不知道路徑的話,可以在資料夾上右鍵,選擇內容(Windows)/簡介(Mac),找到「位置」。

如果發現位置有中文,不用擔心,將那一串東西複製下來,貼到網址列上,就會發現一串英文,而這串英文,就是資料夾的絕對路徑。

移動到專案資料夾後,接著使用compass指令「產生一個新的專案」:

  1. > compass create

稍待片刻後可以看到終端機裡多了一堆字,而資料夾裡也多了好幾個資料夾和檔案。

compass-create-01
[圖一]compass create
compass-create-02
[圖二]compass create後的專案
到這邊為止Compass已經在專案資料夾裡建立好三個 Sass檔案、三個由Scss編譯後的Css檔案以及一個設定檔,如下:

  • config.rb // 所謂的設定檔
  • sass
    • ie.sass //真不塊是ie還特別開一個scss進行設定
    • print.sass //列印專用的樣式
    • screen.sass //一般頁面不管瀏覽器的sass
  • stylesheets
    • ie.css
    • print.css
    • screen.css

這幾個檔案是使用Compass建立專案時會自動產生的檔案,理所當然可以砍掉,也可以新增自己的檔案。只是要千萬記得創立新檔時記得創立SCSS檔案而不是CSS檔案喔!不然一編譯就把寫好的css給蓋掉了。

至於設定檔內容和如何使用,將於下週進行介紹,敬請拭目以待。

3.既有專案:專案已有內容時

這邊的狀況其實就是「專案不是空白狀態」但又想用SCSS該怎麼辦?以下有兩個選擇:

選擇一:無視已存在的CSS檔案,直接針對專案使用「compass init」。由於 compass init 自動產生的 css 資料夾是叫做 stylesheets,所以應該不會有撞名問題(一般專案放css檔案的資料夾大多就直接叫css)。

選擇二:創立SCSS檔案後手動編譯(需搭配已存在的config.rb)。這邊會需要編輯設定檔 config.rb,詳細編輯下回會說明。

某貓當初將舊專案的CSS全部改為使用SCSS時是採用選擇二,其實想想第一種方式比較輕鬆阿……

專案方面,先以某貓去年的就專案結構為範例:

  • css
    • mainCss.css // 一般網頁電腦版使用,不分瀏覽器和瀏覽器版本
    • mainCss767.css //手機版網頁使用
    • print.css //列印用
  • js
    • jquery-1.9.1.js
  • images

當然一個專案(還是 rwd專案)不可能只有這幾個檔案和資料夾,只是其他與本篇無關所以省略了。

3.1.選擇一:compass init

首先是選擇一:使用「compass init」。在compass help(打compass -h也能看到同樣的內容)裡,「compass init」使用的時機為「當專案已存在且專案內容並非空白」時。

雖說如此,但使用「compass init」和「compass create」的效果根本一樣,還是其實有明顯不同的地方卻被我忽略了呢?

恩看起來是沒有ಠ_ಠ。

使用「compass init」後,專案裡便會多出跟使用「compass create」一樣的兩個資料夾及一個設定檔,至於如何使用設定檔,敬請期待下週。

3.2.選擇二:config.rb+自行編譯css檔

這個選擇的前提是需要設定檔「config.rb的存在」,在這需要先使用另一個指令:

  1. > compass config

這個指令會在專案資料夾裡產生一個「config」資料夾,裡頭則是「compass.rb」。

不曉得有沒有注意到,這個指令產生的設定檔位置跟名字,都跟使用「compass init」或「compass create」的不一樣!不過這個「compass.rb」就等於使用「compass create」或「compass init」產生的「config.rb」。

接著,假設現在要進行修改的是「mainCss.css」的話:

步驟一:在專案裡創立資料夾「sass」。

這邊也許會有疑惑為何不能叫scss或是其他名稱?其實是可以的,但要改compass.rb這個設定檔,所以目前就先用預設名稱。

步驟二:在資料夾「sass」裡新增檔案「mainCss.scss」

步驟三:使用指令「compass compile」

接著可以看到資料夾裡「自動」多了「stylesheets」資料夾,而裡頭已經有compass編譯過的css檔案「mainCss.css」了。

compass-create-byself-01
[圖三]compass compile
compass-create-byself-02
[圖四]compass compile後的專案
到這邊我們有scss檔案、有css檔案,也有設定檔了,下週將會介紹核心檔案的設定檔,了解「如何在一行程式完成css檔案壓縮」,不得不說這個功能真的好用。

那麼,下週再見。

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.