Out-of-the-box Omega 4 integrates Sass support. Subthemes created using the Drush wizard have a clean starting point for customizing the theme using modern CSS approaches. There are, however, a number of requirements that must be available in order to use these:

What is Sass?

Sass is an extension of CSS3 which adds nested rules, variables, mixins, selector inheritance, and many other features. It’s translated to well-formatted, standard CSS using the command line tool or a web-framework plugin and is compiled with a processor that compiles stylesheets from .scss/.sass to .css from the command line.

It is expected that you install and use Sass on your development machine only, to generate and test the CSS which you then migrate to your production server when it is complete. SASS is a development tool for generating CSS files, and does not belong on a production server.

Omega's starterkits

Omega 4.x has two starterkits utilizing two methods for processing Sass. Both dusty and default methods ensure the right dependencies are installed for your project and they are project-specific. This is important because many are constantly upgraded and sometimes new versions break the backwards compatibility, i.e., causing some of the mixins syntax to change. This means that when upgrading the gems for Project A, Project B might suddenly not compile properly anymore. Hence, we explicitly separate and specifically install them on a per-project basis.

When utilizing the wizard for creating a subtheme, it will ask you to chose a starterkit

Default

This newer starterkit utilizes bleeding edge Sass processing technology. Instead of using Ruby's Sass processor, it uses Libsass, which is run using Node. You will need to install Node.js and NPM on your local front-end development stack to utilize it.

Once you've done this, head to your theme directory and run
npm install
This will use package.json to locally install all the dependencies needed for the project.

Once that's done, you can use gulp, a handy task manager, to process your sass. There is already a gulp file, gulpfile.js, that defines what gulp does when you run the command
gulp
in your theme directory. Basically it processes your sass into css and then watches for any new changes while you are working and processes those until you end the task.

Dusty

Dusty is the rather outdated starterkit leveraging the Ruby Sass preprocessor. Comes with a well organized Sass setup with heavy use of partials. Ruby is the programming language originally behind Sass and all the things that extend it. Ruby Gems like Compass, Susy, and Singularity GS, are basically software packages written in Ruby.

Once Ruby is installed / available, installation of the dependencies can be resolved via the following commands:

  • gem install bundler
  • bundle install

(must be executed from the subtheme's directory in order to pick up the list of dependencies)

Once the requirements are installed, it should be possible to run bundle exec compass compile to generate updated CSS for the theme or to run bundle exec compass watch to generate automatically updated files every time the Sass/SCSS files change. Note: these commands must be run via the terminal from the subtheme's directory, not the site's root directory.

See also: Using Sass and Compass with Omega 3.x

Comments

candelas’s picture

candelas commented

I had ruby installed and gem and i used the command 

sudo gem install toolkit compass compass-normalize compass-rgbapng susy sass-globbing

and i got this error

ERROR:  While executing gem ... (Gem::DependencyError)
    Unable to resolve dependencies: sass requires listen (~> 1.1.0); compass requires compass-core (~> 1.0.0.alpha.16), compass-import-once (~> 1.0.1), listen (~> 1.1.0), json (>= 0)
colors@colors:/var/www/euro-glashaus.com/sites/default$ 
colors@colors:/var/www/euro-glashaus.com/sites/default$ sudo gem install toolkit 
ERROR:  While executing gem ... (Gem::DependencyError)
    Unable to resolve dependencies: sass requires listen (~> 1.1.0); compass requires compass-core (~> 1.0.0.alpha.16), compass-import-once (~> 1.0.1), listen (~> 1.1.0), json (>= 0)

i realized that i had ruby version 1.8 and sass needs version 1.9.3 at least to work. so i uninstalled the old version and i used this tutorial to install the 2.1 version.

then i could use without errors

sudo gem install toolkit compass compass-normalize compass-rgbapng susy sass-globbing

thanks for the omega 4 tutorial. i am impatient to try it :)

//trying to answer one question for each one that i make.
//this way, drupal will be more friendly and strong

dman’s picture

dman commented

I was getting the same errors. I was on OSX, and only had ruby installed somehow a long time ago for some experiment I can hardly remember. It turns out I had used RVM to install ruby - which had been recommended by someone in the office at the time.

At various times I've also had both 'fink' 'brew' and 'apt-get' package managers put things onto OSX, so I'm no longer sure which installed what.

(I had assumed that installing a useful system-wide tool would mean using sudo, but in this case that actually caused problems, so running as myself was apparently the trick. Odd.)

Same as candelas above, running the given line gave me the same "Unable to resolve dependencies" error, even if I tried to do those installs one by one.

Anyway, short story was the thing that worked for me was like the following.

  ruby -v # told me the version was something old , ruby 1.9.3p125 (2012-02-16 revision 34643) [x86_64-darwin11.4.0]
  rvm get latest # self-update for RVM
  rvm list known # tells me that the most likely looking stable ruby release today is 2.10. 
  rvm install 2.1.0 # some docs claimed I could install 'stable' but that failed - needed to actually use a version number.

Actually ^ failed the first times, though it did try pretty hard. I needed to first go
rvm autolibs fink
and then run the rvm install again before it was able to pull in the other system-level updates like openssl.

eventually though, I had a newer ruby

ruby --version
ruby 2.1.0p0 (2013-12-25 revision 44422) [x86_64-darwin12.0]

And running the "sudo gem install ... " line worked.

.dan. is the New Zealand Drupal Developer working on Government Web Standards

fubhy’s picture

fubhy commented

Please DON'T use sudo gem install!

Instead, ALWAYS install your gems using Bundler with the command bundle install

clairedesbois@gmail.com’s picture

clairedesbois@gmail.com
she/her
Primary language French
Location Montreal
commented

Can you explain why it's better to use bundle install and not gem install? What's the difference?
In every tutorial on SASS I've read, it propose always gem install including the SASS' official website.

EDIT
Sorry, i missed the line on bundler.

fubhy’s picture

fubhy commented

Bundler is a dependency management system for ruby gems. It helps you maintain a clean and consistent stack of ruby gems even across environments (with the Gemfile.lock file). I would even say that this is required if you are working with Sass due to the pace at which these gems ship new versions that might break compatibility with your Sass mixin usage for example. If you don't want your Sass/Compass stack to blow up in your face after coming back after a couple of weeks (and potentially having upgraded the used gems elsewhere) then use Bundler (so... use Bundler).

dman’s picture

dman commented

Thanks for the clearer explanation. Yes, as I have only been using this sort of stack once every few months, the installs have basically been unusable each time I revisit them, and I have been having to start from scratch (and trace conflicts) every single time. If this is endemic, and not just me, and there is a solution now, then thanks for letting me know!

.dan. is the New Zealand Drupal Developer working on Government Web Standards

Michael Dajewski’s picture

Michael Dajewski commented

Installing on fresh OS X 10.9.3, you may get following error: 

Gem::Ext::BuildError: ERROR: Failed to build gem native extension.

    /System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/bin/ruby extconf.rb 
mkmf.rb can't find header files for ruby at /System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/lib/ruby/include/ruby.h

extconf failed, exit code 1

Gem files will remain installed in /Library/Ruby/Gems/2.0.0/gems/eventmachine-1.0.3 for inspection.
Results logged to /Library/Ruby/Gems/2.0.0/extensions/universal-darwin-13/2.0.0/eventmachine-1.0.3/gem_make.out
An error occurred while installing eventmachine (1.0.3), and Bundler cannot continue.
Make sure that `gem install eventmachine -v '1.0.3'` succeeds before bundling.

I have found the hint at: http://contolini.com/2012/05/10/installing-ruby-development-headers-on-m...

At the command prompt type:
gcc -v
You will be prompted to install package - do so.
The ruby-dev will be installed and the issue should go away.

karolus’s picture

karolus commented

I had a similar issue to Michael's today, running a later version of OS X.

All was fine for most of the day, until all processes were running slow, so I did a reboot. Upon restart, I was getting a number of errors when attempting to run $ drush omega-guard, and the string of errors would not go away.

I imagine part of the issue was from updating Homebrew, Ruby, RVM and other components to run another application earlier in the day, and this only became apparent after the old processes for my Omega project were restored after reboot.

I did a number of searches on the issue, and to no avail. After closing Terminal and restarting a number of times, I finally was presented with the following dialog when navigating to the theme folder:

ruby-1.9.3-p551 is not installed.
To install do: 'rvm install ruby-1.9.3-p551'

After doing this, all was OK.

strangerism’s picture

strangerism commented

On installing the bundler (OSX) I ended up using sudo due to permission problems, although I am not sure if I could have done differently. I'll admit I am new to ruby, gems and all this kind of stuff. I wonder if it is possible to roll back to a more safer installation. Many thanks.

massimos-Air:d7dev massimo$ gem install bundler
Fetching: bundler-1.8.2.gem (100%)
ERROR: While executing gem ... (Gem::FilePermissionError)
You don't have write permissions for the /Library/Ruby/Gems/2.0.0 directory.
massimos-Air:d7dev massimo$ ls -lrt /Library/Ruby/Gems/2.0.0
total 0
drwxr-xr-x 3 root wheel 102 Sep 9 23:44 specifications
drwxr-xr-x 5 root wheel 170 Sep 9 23:44 gems
drwxr-xr-x 2 root wheel 68 Sep 9 23:44 doc
drwxr-xr-x 2 root wheel 68 Sep 9 23:44 cache
drwxr-xr-x 2 root wheel 68 Sep 9 23:44 build_info
massimos-Air:d7dev massimo$ sudo gem install bundler

pdmackenzie’s picture

pdmackenzie commented

Hello!

I was able to use the 'gem install whatever' command to install compass, bundler, sass-globbing and susy to my virtual server.

However, when attempting to install compass-normalize or compass-rgbapng I receive the error:
[FATAL] failed to allocate memory

There is certainly a lot of mention of this error in forums, usually associated with Ruby and iOS X. I am completely ignorant of Ruby and am starting to wonder if it is worth the time and effort to slog my way through Omega.

Maybe the two compass-* gems aren't as mandatory as it says on this page? FYI my server is a typical LAMP stack hosted by onyxServers.

Regards,
Doug

mossy2100’s picture

mossy2100 commented

This is insanity. No wonder people complain about Drupal having a steep learning curve.

Please add to the documentation that you must cd to your theme's directory (e.g. cd sites/all/themes/YOUR_THEME) before running "bundle install" so people who haven't used it before don't get massively frustrated having to figure that out for themselves.

Interested in space? Join the Mars Settlement Research Organisation on Facebook!

scotwith1t’s picture

scotwith1t
Location Birmingham, AL
commented

I rarely chime in on stuff like this, but I have to agree. I was trying to watch fubhy's video at http://www.youtube.com/watch?v=CmTuvzbPduI#t=314 and follow along and I couldn't really even get started. The assumption is that people will already have some sort of understanding of Ruby, gems, bundles, installers, version control, even git and I would venture to say that a large majority of themers out there never had the desire nor need to learn this stuff until recently with the advent of SASS and related technologies. While I'm hammering away at getting things installed and googling my brains out, I really have to echo mossy2100's sentiment that this really needs to thorough documentation.

That being said, I'm excited about the possibilities with livereload, SASS and all kinds of other fun things I can geek out about, just very frustrating to try and get into when I've had zero exposure to Ruby or anything related to it. But I will have plenty once I'm done figuring this out! :)

scotwith1t’s picture

scotwith1t
Location Birmingham, AL
commented

no idea why, but this comment posted 3 times. i swear, i patiently clicked once and waited!

scotwith1t’s picture

scotwith1t
Location Birmingham, AL
commented

.

GuyPaddock’s picture

GuyPaddock commented

To be fair, Ruby and Bundler are pre-requisites of Compass, which is used to compile SASS into CSS; they have nothing to do with Drupal. In addition, Omega does not require you to use SASS in your theme if you do not choose to do so.

If I had been the developer of Compass, I wouldn't have written it in Ruby because Ruby does not port well across operating systems. (And, in general, I personally don't like Ruby.) Unfortunately, Compass was written in Ruby.

All Omega is doing is coming up to the currently accepted trend in web design of making use of SASS and Compass to streamline the theme development process.

You have at least two Drupal-friendly options that don't require the use of SASS, Ruby, Compass, Bundler, etc:

1. Use CSS and ignore the SASS functionality of Omega 4.
2. Use a different base theme other than Omega (or even use Omega 3).

pietpomp’s picture

pietpomp commented

!Please note: Check with your hosting company if they support/allow Ruby on the shared hosting accounts.

I spent days trying to trace all sorts of errors and permission workarounds. From RVM to Ruby, even php.inc and PEAR. Forget about compose to drush working.

Anyway, as exciting as the SASS et al efficiency sounds, it should be in BOLD at the top that in real life terms RUBY is something that shared hosting and Cpanel don’t like. CHECK it first. Before going through all the hoops to get bits and bobs to talk to each other.
It is sad, but now it's back to ploughing through lean handbook docs to try and get Omega 4 Sans-SASS to work efficiently.

aDarkling’s picture

aDarkling commented

As I understand it so far, it helps to just think of Ruby+Sass as a CSS file generator. Then Compass is basically a library of CSS recipes. You only run this stuff when you're making changes. You can find a good short summary video on the Compass help page

Therefore, as long as you're developing/maintaining the site(s) on your local machine and pushing your final changes to the production server (VERY recommended), you don't have to install that stuff on your shared hosting. Just upload the new CSS files when you're satisfied with your work.

sepph’s picture

sepph commented

I had an issue when I ran 'bundle install' - It would fail to install a number of the gems. It looks as though its related to an update in the command line tools provided by Xcode 5.1 (see http://stackoverflow.com/questions/22352838/ruby-gem-install-json-fails-...).

I managed to get 'bundle install' to work with the following command:

ARCHFLAGS=-Wno-error=unused-command-line-argument-hard-error-in-future bundle install

nithinkolekar’s picture

nithinkolekar commented

is this tutorial specific to *nix environment? or can it also be applied to windows because my development environment is windows with WAMP stack.

rashidkhan’s picture

rashidkhan commented

nithinkolekar, Download ruby from here Ruby Installer for Windows. then write gem install sass in your command prompt. Then check if sass is installed by running this command sass -v.
For installing compass write gem install compassor follow this tutorial SASS, Compass

ragnarkurm’s picture

ragnarkurm commented

Each time I install Omega, I struggle quite a bit (sometimes days) to get straight with Ruby and all the dependency horror. So I document this for myself here and hopefully it helps others too.

I do not install any Ruby stuff as root.
I do user only install (though some basic general system libs may be necessary to install as root).

In my home directory:

$ gpg --keyserver hkp://keys.gnupg.net --recv-keys \
409B6B1796C275462A1703113804BB82D39DC0E3
or
$ command curl -sSL https://rvm.io/mpapis.asc \
| gpg2 --import -

$ \curl -sSL https://get.rvm.io | bash -s stable
$ source /home/myusername/.rvm/scripts/rvm
$ rvm get latest

Check all ~/.xxx files as RVM pollutes all dotfiles.

Now go to newly created omega 4 directory cd default/themes/mythemename/ and it tells what kind of Ruby it needs, use that. Do all following in that directory:

$ cd mythemename/
ruby-1.9.3-p551 is not installed.
To install do: 'rvm install ruby-1.9.3-p551'
$ rvm install ruby-1.9.3-p551
$ gem install bundler
$ bundle install
$ bundle exec compass compile
karolus’s picture

karolus commented

ragnarkum is right,

It's not good to install Ruby components as root. Sudo commands should be reserved for worst-case scenarios, since using it can inadvertently break other components.

I've been running Omega 4x on projects fine for some time now, but some recent system updates seem to have broken things in the compiled gems (presumably due to incompatibilities).

To fix things (since every installation was different), it may be good to check the Gemfiile.lock file in your custom theme, and manually update a dependency version, if needed. I found that some will not update via the CLI, due to referencing information in this file.