What the what? How do I actually start using Omega 4 with Ruby or SASS or Compass or whatever?

First of all, let's talk about the development setup and the software (Ruby Gem) requirements. To get rid of some of the confusion you seem to be having: Sass (or, rather, it's Compiler) is written in Ruby. So it's not Ruby OR Sass! Ruby is the programming language behind Sass and all the things that extend it Compass, Susy, etc. (all being ruby gems). Gems are basically software packages written in Ruby, no more, no less.

Sass (note, not capitalized :P) and all the other Ruby Gems that extend it's functionality are development tools that you install on your (optimally local) development machine. It's not a replacement for anything that you just mentioned and it is not even close to replacing something like your IDE (Code, Dreamweaver, etc.). It's something that you run from the command line to compile your stylesheets from .scss/.sass to .css... no more, no less.

The best possible way to install Ruby and the required Ruby Gems (and manage them properly in the future) is to run Ruby through RVM (Ruby Version Manager) from http://rvm.io/. I am not going into more detail on how to set up RVM as there is a variety of tutorials for that on the web already.

As you are on a MacBook Pro I can already tell you that you will require some kind of package manager like Homebrew to install all that properly. Oh, and XCode development tools is a requirement too. I assume you already have all that installed.

Okay, now that you have RVM installed the following is going to be rather simple.

During the installation of RVM it automatically (when everything went well) installed two more important things together with actual Ruby. These two things are a) rubygems and b) bundler. I guess it's clear now what "rubygems" does (it's the requirement for working with ruby gems).

Now... Bundler: Bundler is a tool that helps you to manage and automatically install groups of Gems specified in a so called "Gemfile". You can find that file in your subtheme (if properly generated using Drush). In addition to that you will find two files (.ruby-version and .ruby-gemset) in your subtheme. These files are essential for the RVM workflow that I suggest everyone to use. It tells RVM, when navigating to the subtheme folder in your Command Line, that THIS folder is an "isolated" ruby (.ruby-version) and gem (.ruby-gemset) environment making every following command (here and in every sub-folder) specific to your subtheme. This is very important to understand.

Note, every "ruby" or "gem" command that you run from within this folder causes the desired action (like installing a gem, removing a gem, etc.) to only affect your subtheme.

Take a look at the generated .ruby-version and .ruby-gemset files. They include the name of your subtheme to identify them on your system.

Running "rvm list" from within your subtheme folder you will see that it lists your local environment there and states that it currently uses it (@see .ruby-version file).

Running "rvm gemset list" will show you the active "gemset" (@see .ruby-gemset file).

@see http://cheat.errtheblog.com/s/rvm for a quick cheat sheet for using RVM.

Why is this functionality important?

Most of the Sass Ruby Gems (Susy, Breakpoint, etc.) have rather short-lived versions. They constantly get upgrade and, sometimes, it happens that, with a new version, they break Backwards Compatibility causing some of the mixins syntax to change for example. 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 the Gems on a per-project basis.

Okay, so now we got separate ruby and gem environments. But we don't have the Gems installed yet! Installing them is quite simple now. Remember, I mentioned "Bundler" before. Due to the Gemfile specified in your subtheme you can install all the cool Sass Gems in one go. Simply run "bundle install" in your subtheme folder (from the Command Line) and it will read the Gems specified in the Gemfile and install them (and all their dependencies) one by one.

While doing that, it creates a file named "Gemfile.lock" next to the original Gemfile. This is something really cool as it keeps track of the explicit version numbers of the Gems that you just installed. This is really important to understand! Now, when running "bundle install" again (e.g. in case you want to work on two computers or you have multiple developers in your team for which you need to install the Gems) it ensures that it installs the EXACT same versions on all of the developer machines that work with this project. Together with the isolated environments this allows for perfectly clean environments for everyone on your team (or all your machines). The Gemfile.lock should ideally end up in your git repository as well so even when you come back a year later (at which point you probably already deleted the project from your computer) and you install all the Ruby stuff again you get the exact same versions of the Gems that you had back when you first worked on the project. This ensures that all of the .scss/.sass re-compiles exactly the same way as it did a year ago. Fancy!

Please also read https://drupal.org/node/1957522#comment-7410304 for more information on Ruby and Bundler and how it helps you in your development.

Okay, so now everything is properly installed (Ruby (through RVM), your Gems (through Bundler)) and you want to start working with Sass. Sass, as mentioned before is a compiler for .scss/.sass files that outputs .css files. Said compiler can be invoked in multiple different ways. By default, when using Compass (a Sass framework), you can use "compass compile" to compile your stylesheets (manually) from Sass to CSS based on what is specified in your "config.rb" file (note, the config.rb file defines HOW and WHERE the compiler should operate). Normally you DON'T have to change that file.

This process (compass compile) can be automated by using "compass watch" which triggers the compiler every time you change a .scss/.sass file in your project... So much about the idea of automatically (re-)compiling your stylesheets every time you change a project file (very handy).

I am not going to explain "LiveReload" or "Guard" (also supported by Omega) here as those are basically just additional features on top of what I just explained but I think this is enough information for now for you to get started. Once everything is running fine with the workflow explained above you can start looking at LiveReload/Guard/Grunt.

I hope this helps.

Just found out about http://jewelrybox.unfiniti.com ... Might help you to get started with RVM!

Thanks for that initial roadmap -- really like omega 3 - looking at omega 4 I feel lost - so good to have something to dig into .. Thx -- following this

20131102 - removed by author

dunno if this is helpful or not but just thought I'd post this

Reading over this post https://drupal.org/node/1808252 -- for me, was helpful in getting up to speed w. Sass / Compass applying it to Omega 3 which I am comfortable with .. so, just taking it step by step.. apply Sass to omega 3 ..working toward embracing omega 4 and all of its smart new capabilities.

Other Sass / code resources I've found are https://www.codeschool.com/ well presented w. 'tests'
and ran thru the Lynda.com training video on Sass/Less/ Compass. http://www.lynda.com/CSS-tutorials/CSS-LESS-SASS/107921-2.html?autocompl... ( these are not free but follow a logical informative path )

Learning never stops, does it :P

20131102 - removed by author

I really appreciate somatics original post here. I've just begun to dig in to Omega 4, but to quote Morpheus in The Matrix, I'm feeling a bit like Alice wondering how deep the rabbit-hole goes.

I'm not a developer. I'm more of a designer. I understand CSS and feel like I grok Sass enough to work with it. I doubt I'll really be proficient with Drush. I got most of drush up and running on my local machine (Mac Mountain Lion) as well as my shared hosting service. But, the drush subtheme installation constantly failed so I just installed the subtheme manually. (Probably the first red flag to most of you developers).

Now, as I read through all the Omega 4 documentation for setting up The Proper Front-End Development Stack, my head really starts spinning.

Do I really need all this? If I can comprehend Sass and get it installed correctly on my Mac, can I use this theme or is it just always going to be over my head? I realize that this is still new and being documented, and I appreciate all the effort (I'm not trying to be disrespectful).

I'm just at a crossroads here with Omega 4. As a non-developer -- should I take the red pill, or the blue pill (and just stick with Fusion or some other theme and leave Omega 4 to the heavy-duty themers and developers)?

Thanks.

Its daunting but doable.
here's a post that could help http://solutionsbyheidi.com/2013/04/04/using-omega-4-with-omega-child-th...

when using drush to generate a subtheme be sure the omega tools module is not enabled - then i had to clear the drush cache after removing the omega tools directory to get the omega-wizard to run ..which it did and was super facile. good luck. we're in this together..

here's a post that could help http://solutionsbyheidi.com/2013/04/04/using-omega-4-with-omega-child-th...

Please note my comment on that blog post. It's a good blog post, but the installation instructions there don't quite fit my idea/dream of a perfect setup. So go ahead and read it but also understand that the better resource for setup instructions is in our handbooks already and I would suggest anyone to follow that instead.

Still, definitely worth reading.

thank you fubhy for your eye on this. .

Gosh, there is a lot to this Omega 4 stuff!

For thorough and up to date write-up for installing Xcode, Homebrew and Ruby on a Mac, check out the following link... http://www.interworks.com/blogs/ckaukis/2013/03/05/installing-ruby-200-r...

I just moved over from a PC to Macbook so that I can get to grips with Omega 4. I hope it's worth the investment :-)

Thanks paul.

@MrPaulDriver: You don't have to change your hardware... If you are on Windows you can simply use a Virtual Machine too. There are various walkthroughs for how to set up a Drupal webdev environment on Windows using VMs on Google.

Understood fubhy. I'm keen not to go off topic as this is an Omega 4 discussion, only to say my decision is also based on the fact that so many Drupal designers and devs seem now to be on OSX or Linux and because of this I thought it was time that I was speaking the same language. [Edit: removed off topic drivel]

Omega 4.x Demonstration w/Sebastian aka fubhy

http://www.youtube.com/watch?v=CmTuvzbPduI&feature=share

Thanks fubhy for posting and doing this screen cast.. its long but does help get our heads around using all the new tools. Thanks the work you do

"I feel like I've been dropped in the middle of a forest and been told to build a taxi cab."

This gave me a pretty good laugh!

Loving this omega stuff. You guys rule!

I'd love it if some of what fubhy has described here (in awesome detail! kudos!) could make it into part of the official Documentation for Omega.

As someone who is coming from the old, static CSS school of design and theming, having a walkthrough of the prerequisites is extremely helpful. I've been banging my head against the desk trying to figure out how to satisfy requirements - like installing Compass extensions with rvm/bundler - and this is the first and only place I've found that actually had a reasonable and helpful description.

It seems like a major hurdle coming from a place of regular ol' CSS into this brave new world of Sass/Susy/Compass/etc., and I imagine others feel the same intimidation when they can't just "get up and start theming" but instead have to go through a whole process just to get setup, so for me, Comment #1 is incredibly valuable and I'd love to see it fleshed out in the docs.

Thanks!

As I can see the Omega 3 will be abandoned for Omega 4. I read already a few tutorials about it and my impression is that it takes a whole big setup that is gone cost me and my old machines a lot of headaches. The Drupal had the big advantage that I could run it with basic knowledge and software, such as Textmate, CSSEdit, Espresso and Smultron and for layouting Photoshop and Illustrator. This I can setup in Mamp for testing before going online. Even Drush is not necessary for me because I like to change the Modules and Themes manually. I have learned almost everything I know now by reading the Readme-files and in the end this takes not much time or effort. Also Omega 3 was fulfilling my needs for the responsive environment with which we are all confronted.
What bothers me is that things like X-code and Ruby can be interesting for making a lot of websites but are too heavy for older machines. It has also to be running all the time since versions are changing and need to be updated.
I think that there will be a lot of people like me that can do all these Sass and Ruby things but don't have the need for it. It looks great but it is too much for the purpose.
So therefore I regret the loss of Omega 3. I invested some time in it but I regret that Omega 4 seems to go to the real professionals with the equipment that is needed to run these programms that are needed.

That's not true. You can actually use Omega without Sass, but to unlock its full potential, you'll want to learn it. Designing with CSS for the current state of the Web is not the same as it was 5 years ago. Just like with programming in PHP and Drupal, you have to learn new techniques in order to stay current - and therefore relevant. That's why I'm willing to invest time into learning how things work, because I know it will set me up for success for years to come.

That being said, Omega 3 can still be used (and it seems like it's been pretty stable for a while) and it doesn't appear that they'll be abandoning it. The theme package hasn't been updated since Feb. of 2012 anyway so I think it's safe to say you can continue using Omega 3 as long as you wish.

If this is helpful to anyone, there is an exhaustive tutorial series on youtube by LevelUpTuts on Omega 4. Covers sass, ruby, etc.

#1 aweome round-up, fubhy, and still a very rich come-back-and-read-again reference text.

I can also recommend the youtube series by LevelUpTuts. it is awesome.

Also remember that if you used omega-wizard to install an omega 4 sub theme, it defaults to not use ruby so you won't end up with any gem files in your sub theme folder. I banged my head on the wall wondering why rvm wasn't making the gem files in my sub theme folder. >.<

Hmm - well I got as far as filing to install rvm. The keyserver does not seem to have the key. I tried searching on http://keys.gnupg.net/, and the key wasn't found.

So still confused :-(