Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Getting started

hlb edited this page · 3 revisions

Getting Started

Previous: Home

When you start Compass.app/Compass-app.exe, you will see a little dark gray icon sitting in your menubar/system tray. Compass.app does not take any space in your Dock/taskbar.

Reminder: Compass.app is written in Java, so it takes a few seconds to warm up.

OS X - Menubar Windows - System Tray

Create Compass Project

We have put some Compass extensions into Compass.app:

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

If you want to use other extensions, please check Use Compass Extensions section.

Let's create your first Compass project. Please click the icon, choose "Create Compass Project → compass → project", give it a name & save.

Reminder: Compass extensions have two parts: templates and stylesheets. Some extensions have many templates, the others are just stylesheets mixins and have no templates at all. Please check Compass Extensions on the Compass offical site.

Create Project - Choose Create Project - Report

Oh la! Compass.app has created the project, and the icon turns into orange. It means Compass.app is "watching" your project. Now if you change the Sass file, it will compile into CSS file automatically.

Now the project folder looks like this:

Project Folder

awesome-website/
  - sass/
    - screen.scss
    - ...
  - stylesheets/
    - ...
  - .sass-cache/   // The hidden sass cache folder. Do not touch it.
  - config.rb      // Compass setting. Do not remove it.

Next: Preferences

Something went wrong with that request. Please try again.