網站製作學習誌

記錄學習製作網站的一切

如何將 Compass 整合到 Zend Framework 中

compass 是一個很讚的編譯型 CSS Framework ，它可以幫我們把 scss/sass 格式的樣式表轉換成 css ，並且還加入許多好用的 extension ，讓我們能更快開發出非常亮眼的網頁 (當然還是要有一定的美術天份) 。 compass 因為是用 ruby 寫的，所以也可以輕鬆地跟 rails 整合。但 compass 還是可以用在其他語言所開發的 Web 專案上，只是手續稍嫌複雜了些。 這幾天試著把 compass 整合到 Zend Framework 中，以下就是整合的過程。

安裝 compass

這邊假設大家已經已經安裝好了 Ruby 環境，那麼 compass 的安裝就很簡單了，只需要在命令列模式下輸入以下指令即可：

1

gem install compass

就是這麼簡單。

註： Windows 下的 Ruby 環境安裝請參考：在 Windows 下使用 LiveReload 。

建立 compass 專案

接下來我們要先建立一個新的 compass 專案，請輸入以下指令：

1

compass create -x sass compass_test

compass_test 可以隨意命名，不要跟現有的專案名稱重複即可。上面的命令執行後，會出現以下結果：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

directory compass_test/ 
directory compass_test/sass/ 
directory compass_test/stylesheets/ 
   create compass_test/config.rb 
   create compass_test/sass/screen.sass 
   create compass_test/sass/print.sass 
   create compass_test/sass/ie.sass 
   create compass_test/stylesheets/ie.css 
   create compass_test/stylesheets/print.css 
   create compass_test/stylesheets/screen.css
...
To import your new stylesheets add the following lines of HTML (or equivalent) to your webpage:
<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>

我們需要的就是那個 config.rb 和 *.sass 檔案囉。

整合至 Zend Framework 專案中

其實目前任何架構的 Zend Framework 專案都可以整合 compass ，不過這邊我以 Portable 的 ZF 專案 來解說。 首先我們要把 config.rb 複製到 ZF 專案的根目錄下，假設 ZF 專案的路徑在 /path/to/compass_zf ，請輸入以下指令：

1

cp /path/to/compass_test/config.rb /path/to/compass_zf

然後再把 sass 目錄複製到 ZF 專案的根目錄下：

1

cp -R /path/to/compass_test/sass /path/to/compass_zf

接著修改 /path/to/compass_zf/config.rb ，原來的內容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# Require any additional compass plugins here.
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"
# You can select your preferred output style here (can be overridden via the command line):
# output_style = :expanded or :nested or :compact or :compressed
# To enable relative paths to assets via compass helper functions. Uncomment:
# relative_assets = true
# To disable debugging comments that display the original location of your selectors. Uncomment:
# line_comments = false
preferred_syntax = :sass

我們要修改的就是第二段的路徑部份，請將它們改成：

1
2
3
4
5

http_path = "/"
css_dir = "public/css"
sass_dir = "sass"
images_dir = "public/img"
javascripts_dir = "public/js"

當然也別忘了在 public 下建立好 css 、 img 及 js 等三個目錄。

註：其實只要修改 config.rb 中的路徑，就可以支援各種架構的 Web 專案了，只是要記得把 config.rb 放在專案根目錄。

最後一步，我們要在樣版上加入 CSS 的連結，把剛剛在產生 compass 專案時所建議的 HTML 貼到 ZF 專案的 layout.phtml 的 head 區段中 (或是其他含有 head 標籤的樣版上) ，並將改成：

1
2
3
4
5

<link href="<?php echo $this->baseUrl(); ?>/css/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
<link href="<?php echo $this->baseUrl(); ?>/css/print.css" media="print" rel="stylesheet" type="text/css" />
<!--[if IE]>
    <link href="<?php echo $this->baseUrl(); ?>/css/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
<![endif]-->

到這邊就完成啦！可以試著用以下指令來試試看 compass 整合後的成果：

1

compass watch /path/to/compass_zf

會產生以下結果：

1
2
3
4
5

>>> Change detected to: ie.sass
   create compass_zf/public/css/ie.css 
   create compass_zf/public/css/print.css 
   create compass_zf/public/css/screen.css 
>>> Compass is watching for changes. Press Ctrl-C to Stop.

現在只要修改 /path/to/compass_zf/sass 下的檔案， compass 就會自動幫你編譯囉。 當然我們可以再搭配 LiveReload 來監看檔案，並將變化即時反應到瀏覽器上，是不是很讚呢？

Comments