Compass 整理筆記
使用 Compass 之前需要先安裝 ruby,這裡我們可以透過官方
的教學來安裝,建議使用 rvm 的方式來管理各種版本的 ruby。
rvm 安裝方式
1 | $ \curl -L https://get.rvm.io | bash -s stable --ruby |
設定 ruby 環境
1 | $ gem update --system |
建立專案
1 | $ compass create Project1 // 單純使用 css |
建立之後 compass 會提示訊息告訴你, Congratulations! Your compass project has been created.
意思是恭喜,你的專案已經建立了。然後呢如果你是用 sass,你現在應該在 sass 的目錄底下開始新增和編輯你的 sass 檔案
例如: style.sass
注意:底線開頭的 sass 檔案叫做 partials 可以稱之為局部文件如 _member.sass
,他們不會被
編譯成單檔而是匯入其他 sass 檔案中使用。
關於 sass 的設定都在 config.rb 裡面。當你做了任何修改,你都需要重新編譯。
編譯指令
1 | $ compass compile [專案路徑] // 到目錄為止 |
開始編寫 sass
在這之前呢, compass 會好心的提醒你需要把下面這段代碼引入到你的 html 中
1 | <head> |
如果你跟我一樣是使用 jade 的話則如下
1 |
|
然後我們就可以試著在 sass 目錄加入自己的 style.sass
並且輸入如下
1 | h2 |
最後 compile 之後就可以看看了。
Compass 整理筆記