Fire.app 安裝 extensions 的方法 – 以 compass-rgbapng 為例 (Windows & Mac)

Standard

前陣子購買了 Fire.app 這套加速前端 prototyping 的好工具,也透過它將個人作品集網站的 CSS 改寫成 SCSS 作為練習。

期間因為需要用到 compass-rgbapng 這套 Fire.app/Compass 的 exntension,它可以將 CSS 中 rgba 改為 transparent PNG 來處理,這都是為了 Internet Explorer 啊….

這邊便簡單紀錄一下 Fire.app 安裝 extensions 的方法。

  1. 將欲安裝的 extensions zip 下載下來。
  2. 接著在 Fire.app 的常駐圖示上按右鍵,選擇 Open Extensions Folder。Windows:

    Mac:

     

  3. 將第 1 步驟中下載下來的檔案解壓縮,整包資料夾放到第 2 步驟中打開的 extensions 資料夾,然後記得更名  我想應該是依照 gemspec 的 name,若有誤請告知 : PWindows:

    Mac:

     

  4. 關閉 Fire.app 後再重新啟動。
  5. 如果此 extension 有提到安裝需求要變更 config.rb,例如 mixins 類的 compass-rgbapng,那就設定你正 Watch 的專案的 config.rb:

    “`
    require "rgbapng"
    “`

    然後由於 rgbapng 會產生圖檔,所以記得 images_dir 也要改成實際對應的目錄名稱。

     

  6. 在 CSS 中使用的話,需要 import:
    “`css
    @import "rgbapng";
    “`

    然後可以這樣使用:

    “`css
    .bg1 {
    @include rgba-background(rgba(255,255,255,0.2));
    }
    “`

    詳細用法請見 compass-rgba 的 github 囉。

安裝 extension 的步驟就到這邊結束。

順帶提一個問題,在 Windows 7 下面使用 Fire.app 時,曾經發生過吐出這樣的錯誤訊息:

error sass/style.scss (Line 2: File to import not found or unreadable: partials/base.

使用 html5-boilerplate 的 style.scss 時發生這個問題,Fire.app 會讀不到 scss/partials/ 下的檔案。

但完全相同的檔案,在 Mac 下就沒有問題。後來想到應該是路徑中包含中文資料夾名稱的關係(Mac 中裡面也有,但就沒問題),更改後就可以了。

特此紀錄。

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *