Use compass extensions

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.