Getting started

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.

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.

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:

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