82 lines
2.6 KiB
Plaintext
82 lines
2.6 KiB
Plaintext
---
|
||
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 or get <a href="http://mhs.github.com/scout-app/"> Scout</a>, another GUI for Compass.
|
||
|
||
%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
|
||
|