chriseppstein/compass

---
title: Install the Compass Stylesheet Authoring Framework
crumb: Install
body_id: install
---
- content_for :javascripts do
  %script(src="/javascripts/install.js")
  
%h2 Installing Ruby  
%p
  Compass runs on any computer that has
  <a href="http://www.ruby-lang.org/en/downloads/">ruby installed</a>.
%p
  For more advanced users you may want to install
  <a href="https://rvm.io/rvm/install">rvm</a>.

%h2 Setting up the ruby environment
%ol
  %li <code>$ gem update --system</code>
  %li <code>$ gem install compass</code>

%h2 Looking for the next release's preview version?
%p
  To install the preview version of Compass:

%ol
  %li <code>gem install compass --pre</code>

%h2 Tell us about your project and we'll help you get it set up:
%blockquote.madlib.customizable<
  I would like to set up my
  %select#existence
    %option{:value => "create"} new
    %option{:value => "init"} existing
  %select#app-type
    %option{:value => "stand-alone"} compass
    %option{:value => "rails"} rails
    %option{:value => "other"} other
  project
  %span.creating
    named
    %input#project_name(placeholder="<myproject>")
  with
  %select#framework
    %option{:value => "compass"} compass's
    %option{:value => "bare"} no
  starter stylesheets.
  %br
  I prefer the
  %select#syntax
    %option{:value => "scss"} CSS based (SCSS)
    %option{:value => "sass"} Indent based (Sass)
  syntax<span class="customization">
  and would like to
  %select#options
    %option{:value => "default"} use compass's recommended
    %option{:value => "customized"} customize my project's
  directory structure<span id="directories" style="display:none;">
  using
  %input#sassdir(placeholder="sass")
  for the sass source directory,
  %input#cssdir(placeholder="stylesheets")
  for the stylesheets output directory,
  %input#jsdir(placeholder="javascripts")
  for the javascripts directory,
  and
  %input#imagesdir(placeholder="images")
  for the images directory</span></span>.

%h4 Thanks. Now run the following steps in your terminal:

%p.note
  Terminal newbies, read <a href="http://wiseheartdesign.com/articles/2010/11/12/the-designers-guide-to-the-osx-command-prompt/">the Designer’s Guide to the OSX Command Prompt</a> first!

#steps
  Loading...
%p.note Note: <code>$</code> is a placeholder for your terminal's prompt. You don't type it.
%h4 Then follow the instructions that compass provides in the output.

%h2 Hate the Command Line?

%p Try one of these Community supported GUI applications:
%ul
  %li <a href="http://compass.handlino.com/">Compass.app</a> from <a href="http://handlino.com/">Handlino</a>.
  %li <a href="http://mhs.github.com/scout-app/">Scout</a> from <a href="http://mutuallyhuman.com/">Mutually Human</a>.

%h2 Next Steps
%ul
  %li
    %a(href="http://sass-lang.com" target="_blank") Learn about Sass
  %li
    %a(href="/help/tutorials/") Read our tutorials
  %li
    %a(href="/reference/compass/") Study the reference documentation