Monday, May 16, 2011

Install Compass and Sass in Ubuntu 11.04

Here is a tutorial on setting up your environment to use compass and sass in Ubuntu 11.04 ( should be the same as previous version )

1) Install Ruby
sudo apt-get install ruby-full

2) Install Gem
sudo apt-get install rubygems1.8

3) Install Rails, sqlite3 ( optional, but usually I install that as well )
sudo gem install rails
sudo gem install sqlite3

Try to run this to make your system up-to-date
sudo gem update --system  

4) Install Compass
sudo gem install compass

5) Install Sass
sudo gem install sass

6) Create your first project
(If you want to use normal css syntax, scss)
compass create <myproject>

(If you want to use sass syntax)
compass create <myproject> --syntax sass

How to create your first project
  1. cd /path/to/projects_folder
  2. compass create my_test_project
  3. compass watch my_test_project
Now you can open your favorite IDE, and look into the just created "my_test_project".  You will see a bunch of files are created.  By default, the "sass" folder is the place for holding the sass files, while the "stylesheets" folder is the place for the generated css files.  And you can configure those by changing the  "config.rb" if you will.

Some "extensions" that you may want to install after you setup your project
  • (CSS3 PIE)  compass install  compass/pie

Some "gems" you may be interested 

For more information on Compass and Sass, please visit the official documentation - http://compass-style.org/install/ and http://sass-lang.com/.

4 comments:

  1. Didn't work for me. ALWAYS have trouble installing ruby on ubuntu. What does work for me is:

    1.a Install Ruby
    sudo apt-get install ruby1.8

    1.b Create the proper symlink
    sudo ln -s /usr/bin/ruby1.8 /usr/bin/ruby

    2. Install Gem
    sudo apt-get install rubygems1.8

    Note: you can skip rails if you only need compass, but you'll need to install Haml!

    3.a Install Haml
    sudo gem install haml

    OR

    3.b Install Rails
    sudo gem install rails

    3.c Optional: Install SQLite 3
    sudo gem install sqlite3

    4. Install Compass
    sudo gem install compass

    Note: this one should come along with step 4, if it doesn't, do it manually:

    5. Install SASS
    sudo gem install sass

    If you experience problems with the compass command, add the proper folder to $PATH:
    echo "PATH=\$PATH:/var/lib/gems/1.8/gems/compass-0.11.5/bin && export PATH" >> ~/.bashrc

    Note that depending on which version you installed of ruby and compass, you obviousely need to change the version numbers.

    ReplyDelete
  2. FYI a 2012 update:

    sudo apt-get install libcompass-ruby1.8

    will accomplish all.

    ReplyDelete
  3. # gem update --system
    ERROR: gem update --system is disabled on Debian, because it will overwrite the content of the rubygems Debian package, and might break your Debian system in subtle ways. The Debian-supported way to update rubygems is through apt-get, using Debian official repositories.
    If you really know what you are doing, you can still update rubygems by setting the REALLY_GEM_UPDATE_SYSTEM environment variable, but please remember that this is completely unsupported by Debian.

    ReplyDelete
    Replies
    1. you have to update your rubygems.
      If you're on Ubuntu 9.04 or later, this might work:

      sudo gem install rubygems-update
      sudo update_rubygems

      it works for me.

      Delete