Using Compass Extensions

Using Compass Extensions

Previous: Preferences

We have put some extensions into Compass.app:

• Blueprint (built-in to Compass)
• Compass (built-in to Compass)
• 960 Grid Sytem
• HTML5 Boilerplate
• Bootstrap
• Susy
• Zurb Foundation

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

Adding with Compass.app

Click the Compass.app icon and select "Open Extensions Folder." Compass.app will open the specific folder where you can put extensions. The extensions inside this folder are automatically loaded when Compass.app starts. These extensions can be use in any project being watched by Compass.app. The extensions are also available from the "Create Compass Project" menu.

Besides adding new extensions to Compass.app, you can overwrite any existing extensions with the same method.

Example: Install Fancy Buttons

Here we use installing fancy-buttons as our example.

1. Download the fancy-buttons zip file.
   
2. Unzip the zip file.
   
3. Open the "lib" folder, you will see a file used to register paths. In this case, the file name is "fancy-buttons.rb".
   IMPORTANT The extension's folder name must be renamed as this file name, in this case, "fancy-buttons."
   
4. Click the Compass.app icon and select "Open Extensions Folder," you'll see the extensions folder open.
   
5. Move the renamed folder to the extensions folder.
   
6. Quit Compass.app and start it again. You'll see the extension appear in the "Create Compass Project" menu.
   

Adding with Ruby gems

WARNING: This is for advanced users only.

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

Next: Sass Mode