Jun

29

Installing Compass on Ubuntu

June 29, 2009 | By: UbuntuLinuxHelp | 6 Comments
Posted in How to...

1 Star2 Stars3 Stars4 Stars5 Stars (10 votes, average: 4.40 out of 5)
Loading ... Loading ...

                                                              

This entry is part 1 of 6 in the series Building a Web Developer / Designer PC

Building a Web Developer / Designer PC

One thing I particularly enjoy are tools that make my work simpler. I was reading a post on Smashing Magazine about "35 CSS-Lifesavers For Efficient Web Design" that mentioned Compass. It's a a real stylesheet framework. As such it's of great benefit to web developers and designers who have some coding skills.

What particularly attracted me to Compass were four issues:

  1. Simplifies maintainable, semantic CSS that I can import into any project.
  2. Compiles my CSS files as beautiful code!
  3. Community support.
  4. Excellent support from the developer, Chris Eppstein, who was VERY generous with his time, patience and assistance while trying to troubleshoot a few things in our multi email session over the greater part of a Sunday afternoon (I'm sure he had better things to do, but I really appreciated his help in getting me going - Thats a great example of outstanding developer and community support - WOW!.

If you've not heard about Compass yet, and you're a web developer, you might want to take a look at their site: http://wiki.github.com/chriseppstein/compass

From the site:

"...Compass is a CSS Meta-Framework that provides ports of the best of breed CSS frameworks to Sass and ready to use in your ruby-based web application or stand-alone via a simple command-line interface..."

and

"...Compass is a real stylesheet framework, not a collection of classes. With Compass, you still use the best of breed css frameworks (blueprint, yui, 960); ported to Sass to make them easier to configure and apply to your semantic markup..."

For designers who might not be overly strong in the coding area, don't let the description scare you away. In fact, the video below may help to provide a better understanding:

Compass: A Real Stylesheet Framework from Chris Eppstein.

As I'm sure you saw in the video above, this is quite the tool. And so simple to use!

If you're thinking about installing this in Ubuntu, it's not in the repositories, but fear not! Here's how I got it working on my Ubuntu Hardy (8.04 LTS) box...

You will need Ruby and the Ruby Gems installed, that's an easy command:

sudo aptitude install ruby rubygems

or via Firefox APT: apt:ruby and apt:rubygems

I also found out that Git and Rake are required. Again:

sudo aptitude install git-core rake

or via Firefox APT: apt:git-core and apt:rake

I found out (actually Mr. Eppstein the developer did) that Aptitude installed an older version of Gem along with Ruby. We need to fix this with the command:

sudo gem update --system

After updating however, Gem was broken with the error:

roger@tinman:~$ gem -v
/usr/bin/gem:10: undefined method `manage_gems' for Gem:Module (NoMethodError)

Note: For those designers not familiar, the command "gem -v" will display the version of the file (in this case it could not, because the Gem config was broken. It's an easy fix however.

sudo gedit /usr/bin/gem

and find the statement that says: Gem.manage_gems

Change it to say (your adding two lines and commenting one out):

require 'rubygems'
require 'rubygems/gem_runner'
#Gem.manage_gems

Now the command: gem -v should display something like:

roger@tinman:~$ gem -v
1.3.4

According to the Compass site:

"...Sass is part of the Ruby-based project called Haml. It will be installed as a dependency of compass automatically during the next step. Please note that compass requires "haml-edge" which is a different gem than “haml” because it tracks recent development of the haml project instead of the stable version. Some users may encounter problems if both are installed. So if you have haml installed, it’s recommended that you uninstall it..."

In my case when I used the command "haml -v" a command not found error was returned, which means haml was not already installed.  Let's get haml-edge installed:

roger@tinman:~$ sudo gem install haml-edge
Successfully installed haml-edge-2.1.38
1 gem installed
Installing ri documentation for haml-edge-2.1.38...
Installing RDoc documentation for haml-edge-2.1.38...
Could not find main page README.rdoc
Could not find main page README.rdoc
Could not find main page README.rdoc
Could not find main page README.rdoc

See the error above? - Don't worry, haml-edge does get installed.

and finally let's get Compass installed:

sudo gem install chriseppstein-compass --source=http://gems.github.com/

You should see the following terminal output:

roger@tinman:~$ sudo gem install chriseppstein-compass --source=http://gems.github.com/
Successfully installed chriseppstein-compass-0.6.15
1 gem installed
Installing ri documentation for chriseppstein-compass-0.6.15...
Installing RDoc documentation for chriseppstein-compass-0.6.15..

Side Note: If you are unable to run some of the commands, like "compass -v" it might be that there is an issue with your PATH (meaning Ubuntu cannot find the copmmand, because it does not look in the right place for it). To edit your PATH (command to view the PATH is "echo $PATH"), you'll need to issue the command: sudo gedit /etc/environment

To reload your PATH without logging out or having to reboot, simply issue the command: source /etc/environment

To see that your components are installed:

roger@tinman:~$ gem list

*** LOCAL GEMS ***

chriseppstein-compass (0.6.15)
haml-edge (2.1.38)

And to see that everything installed okay:

roger@tinman:~$ compass -v
Compass 0.6.15
Copyright (c) 2008-2009 Chris Eppstein
Released under the MIT License.
roger@tinman:~$ haml -v
Haml 2.1.38

Once you successfully run the command to obtain the version of Compass, you've sucessfully installed it and are ready to set up your firts project. Need a bit more information on how to set up a project? visit: A Compass Primer and scroll down to the section that says "Setting up your First Compass Project".

More Compass related resources:

http://acts-as-architect.blogspot.com/

http://assets.pivotallabs.com/talks/03-18-2009_Compass-Sass_Chris-Eppstein.mp4

http://wiki.github.com/chriseppstein/compass/getting-started

http://groups.google.com/group/compass-users

http://github.com/chriseppstein/compass/issues

http://groups.google.com/group/compass-users/browse_thread/thread/d300ed96a389f149

http://gom-jabbar.org/articles/2009/02/04/don-t-use-css-or-table-layout-use-sass-ad-compass

http://awardwinningfjords.com/2009/03/11/compass-the-future-of-sass-development.html

If you like this post, why not share it?
  • StumbleUpon
  • del.icio.us
  • Digg
  • Google Bookmarks
  • Reddit
  • Mixx
  • Yahoo! Bookmarks
  • blogmarks
  • Twitter

Related posts:

  1. Installing an Ubuntu Linux Hardy 8.04 LAMP and FFMpeg Server With a GUI – Installation of OpenSSH.
  2. 10 Things to do After Installing Ubuntu Linux
  3. Installing an Ubuntu Linux Hardy 8.04 LAMP and FFMpeg Server With a GUI – LAMP installation with cgi-bin
  4. Installing an Ubuntu Linux Hardy 8.04 LAMP and FFMpeg Server With a GUI – Hardware Installation.
  5. Installing an Ubuntu Linux Hardy 8.04 LAMP and FFMpeg Server With a GUI – Introduction.


Comments

6 Comments so far

  1. Adam DiCarlo Adam DiCarlo on July 28, 2009 3:32 am

    > sudo gedit /usr/bin/gem

    The problem is that the new version of “gem” is installed into /usr/bin/gem1.8 .

    So you don’t need to manually patch /usr/bin/gem–you can just do this:

    sudo mv /usr/bin/gem1.8 /usr/bin/gem

    Read more from Adam DiCarlo

    Canvas/JavaScript scrolling tile-map demo

    $(document).ready(function () { init(); })

    canvas { border: 2px solid black; }

    Here’s something I did for fun in May as a proof of concept. It uses JavaScript and the canvas tag to rend[...]

  2. Tristan Tristan on October 31, 2009 3:18 am

    Thank you very much!
    I found this helpful for getting compass up and running.
    However my install was a little different.

    Ubuntu 9.10
    Only interested in compass (not ruby).
    Here is what I did:

    apt-get install rubygems

    gem sources –add http://gems.github.com/
    (because I’ll use it later)

    gem install haml

    gem install chriseppstein-compass

    At this point the the command “compass” wasn’t working.
    I had to add “/var/lib/gems/1.8/bin” to /etc/environment

    I hope this helps someone else.
    Thank you again for the info.

  3. viatropos viatropos on February 2, 2010 6:29 pm

    Thank you very much, this solved my problem. I’ve been trying to get Spree running in production on Slicehost with Ubuntu and this was the problem. Awesome.

    Read more: http://ubuntulinuxhelp.com/ins.....z0eQMr63hF

  4. autolico autolico on March 30, 2010 4:23 am

    Nowadays you can use the normal haml distribution:

    sudo gem install haml

    Installing haml-edge will cause an error to be thrown when installing compass.

  5. UbuntuLinuxHelp UbuntuLinuxHelp on April 3, 2010 8:30 am

    @autolico

    If I remember… I used haml-edge because the developer indicated there were some components in it (that were missing in haml) ;)

  6. jeff jeff on June 23, 2010 8:51 am

    I’m trying to install compass and it won’t work. it says i need greater than 2.2.0.. but i do. I’m running 2.2.17. COmmand output below..

    $ sudo gem install chriseppstein-compass –source=http://gems.github.com/
    ERROR: Error installing chriseppstein-compass:
    chriseppstein-compass requires haml (>= 2.2.0, runtime)
    $ haml -v
    Haml/Sass 2.2.17

    Any idea what the problem could be?

Name (required)

Email (required)

Website

Speak your mind