Skip to content

Use compass extensions

hlb edited this page Oct 11, 2012 · 4 revisions

Use Compass Extensions

We have put some Compass extensions into Fire.app:

  • Blueprint (builtin in Compass)
  • Compass (builtin in Compass)
  • 960 Grid Sytem
  • HTML5 Boilerplate
  • Zurb Foundation
  • Susy

There are two ways to add more 3rd party extensions.

The Compass way

From Compass 0.11, extensions that are installed into ~/.compass/extensions will be automatically available to all your compass projects.

If you put extensions inside it, Fire.app will load it when the application starts.

Step by Step Guide

Mac:

  • Open "Terminal.app"

  • Create folder:

    mkdir -p ~/.compass/extensions

  • Open the folder in Finder:

    open ~/.compass/extensions

  • Download extensions on Github, unzip it, and throw it into the folder.

  • Restart Fire.app

Windows:

  • Open "Command Prompt"

  • Create folder:

    mkdir "%HOMEPATH%\.compass\extensions"

  • Open the folder in Explorer:

    c:\WINDOWS\explorer.exe "%HOMEPATH%\.compass\extensions"

  • Download extensions on Github, unzip it, and throw it into the folder.

  • Restart Fire.app

Linux:

  • Open "Terminal"

  • Create folder:

    mkdir -p ~/.compass/extensions

  • Open the folder in Nautilus:

    nautilus ~/.compass/extensions

  • Download extensions on Github, unzip it, and throw it into the folder.

  • Restart Fire.app

The Rubygems way

WARNING: It is for advanced users only.

You can choose "Compass Version: Custom" in preferences, and specify your own gem paths. Fire.app will try to load it. Since Fire.app uses JRuby, native gems will not work.


Example: Install compass-rgbapng plugin

  1. Download https://github.com/aaronrussell/compass-rgbapng/downloads
  2. Unzip to ~/.compass/extensions, and IMPORTANT rename it to "compass-rgbapng".
  3. Restart Fire.app
  4. Add require "rgbapng" in the project's config.rb
  5. Add @import "rgbapng"; in your SCSS file.
Clone this wiki locally