Compass 整理筆記

使用 Compass 之前需要先安裝 ruby,這裡我們可以透過官方
的教學來安裝,建議使用 rvm 的方式來管理各種版本的 ruby。

rvm 安裝方式

1
$ \curl -L https://get.rvm.io | bash -s stable --ruby

設定 ruby 環境

1
2
3
$ gem update --system
$ gem install compass
$ compass -v // 確認版本與安裝完成

建立專案

1
2
$ compass create Project1 // 單純使用 css
$ compass create Project2 --syntax sass // 使用 sass

建立之後 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
2
3
4
5
6
7
<head>
<link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
<link href="/stylesheets/print.css" media="print" rel="stylesheet" type="text/css" />
<!--[if IE]>
<link href="/stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
<![endif]-->
</head>

如果你跟我一樣是使用 jade 的話則如下

1
2
3
4
5
6
7

link(rel='stylesheet', href='/stylesheets/screen.css', media='screen, projection', type="text/css")
link(rel='stylesheet', href='/stylesheets/print.css', media='print', type="text/css")
//[if IE]
link(rel='stylesheet', href='/path/project')
<![endif]

然後我們就可以試著在 sass 目錄加入自己的 style.sass
並且輸入如下

1
2
h2
color: red;

最後 compile 之後就可以看看了。

作者

andyyou(YOU,ZONGYAN)

發表於

2013-08-30

更新於

2016-12-19

許可協議