--- 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="http://rvm.beginrescueend.com/rvm/install/">rvm</a>. %h2 Setting up the ruby environment %ol %li <code>$ gem update --system</code> %li <code>$ gem install compass</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 with %select#framework %option{:value => "compass"} compass's %option{:value => "blueprint"} blueprint'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(value="sass") for the sass source directory, %input#cssdir(value="css") for the css output directory, %input#jsdir(value="javascripts") for the javascripts directory, and %input#imagesdir(value="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. %h4 Or you can buy a <a href="http://compass.handlino.com/">GUI for Compass</a> from Handlino. %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