安裝Compass與建立專案

1.到Ruby官網下載最新的Ruby安裝程式,目前最新版本是:Ruby 1.9.2-p290。

2.安裝ruby
安裝途中會出現三個額外的勾選值,滑鼠移到上面會有說明文字。我是三個都有勾

3.回到桌面,點選「開始」→「執行」輸入 cmd 開啟命令提示字元
ps.要使用Compass,幾乎都要在DOS模式輸入指令,指令不難,簡單的可以稍微記一下。

4.輸入 gem install compass 安裝Compass。安裝要等一段時間,安裝完後的畫面大概是這樣▼

5.安裝完後,我們要來創建一個Compass專案。假設我已在D槽下開啟一個叫做Compass的目錄,然後專案名稱要叫做test。
也就是說我的完整目錄是:D:/compass/test/main.html
請依序輸入以下指令
d: //先把目錄指定到D槽
cd compass //再指定目錄到compass
compass create test //在compass底下新建一個叫做test的專案

整個畫面如下▼

6.這時候可以打開你的test資料夾,會發現裡面已經內建好一些目錄與檔案,現在就可以開始寫Compass囉!!

Compass安裝使用目錄

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

■ 文章資訊
人氣: 5,677
分類: css語法.筆記
文章標籤: , ,
引用網址:

■ FACEBOOKs COMMENT:



■ EVERYBODYs COMMENT:
  • 1♥ kuro (LV.2)

    其實 compass 真正威猛的地方是在 @mixin 的部份,還有你可以去抓前人寫好的 code 來用,比較有名的大概就是 fancy buttons,有興趣的話可以去 google 一下

    2011.10.05 20:21
  • 2♥ 佑樣 (LV.8)

    compass只能在server端使用
    想在client端用類似的功能可以使用less

    2011.10.06 14:50
  • 3♥ Yuan (LV.13)

    我有看錯嗎
    Body是900xp???
    不是900px喔?

    2011.10.06 15:54
    • └ Re: muki (LV.1158)

      真是老了,打字愈來愈不順手了
      抱歉,已修正OTL

      2011.10.06 17:45
  • 4♥ 情封 (LV.1)

    这个教学篇不错,晚上我也是试试了compass+sass,觉得还是不能实时编译,要写完一个SCSS,然后compile一次看效果,显得麻烦

    2011.10.08 21:10
  • 5♥ underfire (LV.2)

    compass.app :P

    2011.10.10 22:08
  • 6♥ eRic (LV.4)

    請問Ruby可以裝在windows嗎?

    2011.10.11 12:43
    • └ Re: muki (LV.1158)

      可以唷!
      我的測試環境就是windows

      2011.10.11 13:10
  • 7♥ eRic (LV.4)

    原來如此~我一直以為Ruby只能在mac上用
    謝謝

    2011.10.11 13:36
  • 8♥ 減肥 (LV.2)

    最后的帽子有性格

    2011.10.16 22:12
  • 9♥ 香腸 (LV.51)

    看完之後,我覺得好麻煩喔...QQ
    我還是跟學姊你一樣,喜歡使用手key,慢慢校正,
    邊改編罵,比較有成就感...XD

    2011.10.27 14:28
  • 10♥ jerry985214 (LV.2)

    Compass都不知道怎么装上去啊

    2012.02.15 14:23
    • └ Re: muki (LV.1158)

      我已經寫得很詳細囉
      你是哪裡不懂?

      2012.02.15 15:46
  • 11♥ jerry985214 (LV.2)

    请求高手出场帮忙啊!

    2012.02.15 14:24

  • ■ LEAVE YOUR COMMENT:



      :wink: :-| :-x :twisted: :) 8-O :( :roll: :-P :oops: :-o :mrgreen: :lol: :idea: :-D :evil: :cry: 8) :arrow: :-? :?: :!: