MUKI space*

利用Compass寫CSS

Compass是用sass作為基礎延伸出來的工具，所以用sass語法就可以寫了。但，sass又有分兩種：一種是sass，一種是scss。兩種語法有點差別，大家可以到sass的網站觀看其中差異(請將網頁拉到下面)

這邊要特別注意的是，如果你要用 scss 來寫，請將 css 命名為 style.scss；如果要用 sass 來寫，請將 css 命名為 style.sass。否則就會像我一樣，compile的時候一直出現錯誤訊息=_= (我在這邊卡超久的...，一直以為是我語法寫錯)

error test/sass/style.scss (Line 7: Invalid CSS after "...decoration none":
expected "{", was "")

因為我是用 sass 來撰寫，所以我在 sass 目錄裡頭新建一個檔案叫做 style.sass，然後開啟他編輯。
我打算寫一段css code如下▼

/*css code*/
body {
width:900px;
background:#111;
}
a {
color:#fff;
text-decoration:none;
}
a:hover {
color:red;
}

我在style.sass檔案裡頭就會改成這樣寫▼

/*sass code*/
body
:width 900px
:background #111
a
:color #fff
:text-decoration none
a:hover
:color red

有排版過可能會比較好看一點：(圖片的900xp是錯的，因為找不到原圖了，所以就..請大家將就點OTL)

存檔後接著我們要來compile(編譯)，簡單而言，就是幫你把你寫好的sass轉成css語法。

請開啟命令提示字元，輸入

compass compile test

如果有成功，會出現以下畫面。接著你可以到style.css觀看，應該會幫你產生css code。▼

至於html撰寫以及呼叫css的方式都一樣，這邊就不再贅述了。

Compass安裝使用目錄

1. 前言
2. 安裝Compass與建立專案
3. 嘗試開始寫Compass
4. 後記