Appendix B. Getting started with Compass

 

B.1. Create a new project

To start using Compass in a new project, open up your terminal and run the following: 

$ compass create my-project

This will create the my-project directory if it doesn’t already exist and fill it with the following files:

my-project/
  config.rb
  - sass/
    - ie.scss
    - print.scss
    - screen.scss
  - stylesheets/
    - ie.css
    - print.css
    - screen.css

If you don’t pass a directory to the compass create command, it’ll use your current directory.

In config.rb, you’ll make changes to Compass configurations like asset locations and compression level (more on that in a moment). The sass directory contains some starter stylesheets that you can edit, rename, or toss out completely, but this is where your Sass stylesheets will live. Finally, there’s a stylesheets directory where compiled CSS files are written.

B.1.1. Configuring options during setup

There are several options you can use with the compass create command to configure your project: 

--bare                 (Install without default stylesheets)
--syntax sass          (Use the indented syntax for default stylesheets)
--sass-dir "cool"      (Use the `cool` directory for Sass)
--css-dir "style"      (Use the `style` directory for CSS)
--images-dir "img"     (Use the `img` directory for images)
--fonts-dir "type"     (Use the `type` directory for fonts)
--javascripts-dir "js" (Use the `js` directory for javascripts)

Adding several options looks like this:

B.2. Installing Compass extensions

B.3. Configuring your Compass project

B.4. The command line

sitemap