How to set-up Compass on Ubuntu 14.04 for Omega 4 Development

You are here

I had some issues installing Compass on Ubuntu 14.04 this is what I did and the errors I came up against that gave me a large headache. I hope others can benefit from what I learnt. This assumes that you have already created a sub-theme in Omega4. I installed the following packages initially:

 
sudo apt-get update sudo apt-get install git-core curl zlib1g-dev build-essential libssl-dev libreadline-dev libyaml-dev libsqlite3-dev sqlite3 libxml2-dev libxslt1-dev libcurl4-openssl-dev python-software-properties 
sudo apt-get install libgdbm-dev libncurses5-dev automake libtool bison libffi-dev 

Download the Ruby Version Manager (RVM) so you can add any version you want

 
curl -L https://get.rvm.io | bash -s stable source

Test the directory has installed

 
 ~/.rvm/scripts/rvm 

Install the Ruby Version Manager

  rvm requirements

Let the command-line know where Ruby Version Manager is

  echo "source ~/.rvm/scripts/rvm" >> ~/.bashrc 

Move to where your site sub-theme is situated

  cd /var/www/html/drupaltestsite/sites/all/themes/mytheme

Install the Ruby package that it asks for, in my case it was the following.

  rvm install ruby-1.9.3-p448 

 It will install these files in the RVM

This will display the default Ruby package that is installed

  rvm list

Omega4 will now install all the gems it needs to start developing

  bundle install

Add that to style.scss we are getting ready to test to see if Compass works

body {
  background-color:green;
}

If all went well it will just compile and once you refresh your website it will change the background to green.

 compass compile

Issues that I found with installing Compass on Ubuntu 14.04

Integrating RVM with gnome-terminal I am not sure if this fixed anything but it might affect others follow this link

In your sub-theme add the following to the config.rb

Line 3 of sass/filename.styles.scss: File to import not found or unreadable: breakpoint.
require 'compass-normalize'
require 'rgbapng'
require 'toolkit'
require 'susy'
require 'sass-globbing'
require 'breakpoint'
require 'singularitygs'
Line 8: File to import not found or unreadable: toolkit/border-box.

In your SASS files change @import "toolkit/border-box"; to @import "toolkit"; if you try and recompile Compass it will show you where changes need to happen