Getting started

hlb edited this page Mar 12, 2012 · 3 revisions

Getting Started

Previous: Home

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

Reminder: 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

  • 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! has created the project, and the icon turns into orange. It means 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

  - 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