Susy incompatible with rails.

[mrjoshuak]

Following: http://susydocs.oddbird.net/en/latest/install/#quick-start
In a Rails 4 app. I get Undefined mixin 'span'.

In my application.css.sass I have:

    @import compass
    @import compass/reset
    @import susy

    body
      @include container(80em)

    nav
      @include span(3)

Documentation bug? Suggestions on how I can get started with susy?

Thanks.

[samusgray]

Hey Joshua - What versions of Sass, Compass & Susy are specified in your gem file? Nearly all three of them recently released new versions, so it's possible that the right version dependencies are not installed.

[mrjoshuak]

Hmm, looks like there are conflicting requirements. I forced all gems to the latest (don't no why I was picking up old versions on a new project).

Bundler could not find compatible versions for gem "sass":
  In Gemfile:
    susy (~> 2.1.1) ruby depends on
      sass (~> 3.3.0) ruby

    sass-rails (~> 4.0.2) ruby depends on
      sass (3.2.0)

[samusgray]

Did you use bundle update to force the update? I'd try that or delete the gemfile.lock and bundle install to start from scratch.

@ericam - Is any of this obvious to you? If not, I'll try to replicate it in a Rails app and report back tomorrow.

[mrjoshuak]

The rails app was new as of hours ago so bundle install after removing the lock file would not help. I forced the upgrade by setting gem 'sass-rails', '~> 4.0.2', but that has the conflict above. I just forked sass-rails and reduced the strictness of the sass dependency in the gemspec from ~> 3.2.0 to ~> 3.2. Now I can pick up susy 2.1.1, but I'm getting an error trying to start WEBrick with the upgraded compass gem (0.12.2) that I have to suss out now.

[samusgray]

Okay, that makes sense. Do you think this is a bug we should report to Sass and Compass?

Is there something else I can do to help? It sounds like you have a handle on things.

[mrjoshuak]

Well I'm forcing the issue blindly. I don't know if these hard dependencies are true requirements, it's starting to look like it, since compass 0.12.2 doesn't play nice with sass 3.3.

Does susy really require sass 3.3 or is 3.2 good enough? Because neither sass-rails nor compass-rails can use 3.3 yet as far as I can tell.

[samusgray]

Susy does require Sass 3.3 because it uses the maps feature extensively. However, we built in a fallback option to use Susy with older versions of Sass.

Try undoing the forced fix and instead of using @import susy, use @import susyone The susyone portion of the codebase doesn't require Sass 3.3, but it uses the old syntax documented here.

Edit: Actually, I'm not certain that will work in this scenario... I'll look into it and get back to you on this tomorrow.

[mrjoshuak]

Ok, I have confirmation here: rails/sass-rails#198

I guess the latest susy and sass-rails are mutually exclusive at the moment. Too bad.

[mirisuzanne]

Actually, the new Susy gem requires 3.3, no matter which syntax you use. If you want to use the old syntax along with Sass 3.2, you have to use the 1.0.9 release.

[nicollecastrog]

@JoshuaKolden Did you ever find a solution for this? I'm having the same issue and can't seem to find the answer anywhere!

[mrjoshuak]

@nicollecastrong sadly no. I had to give up on using susy and sass 3.3.
The sass-rails gem is a mess: rails/sass-rails#192
Until they support sass 3.3 (cleanly), I think we're both sol.

[mirisuzanne]

According to the conversation in #339, Rails 4 does now support Sass 3.3.

[nicollecastrog]

@ericam I've spent hours upon hours going through the issues on sass-rails but even when I include the latest sass-rails gem with a link to their github (since I read in their issues that the rubygems.org version is a bit outdated as far as sass-rails' dependencies go), aka:

gem 'sass-rails', :github => 'rails/sass-rails'

I was still having problems. It's not susy's fault of course (I'm a big fan by the way!!), it's just that sass-rails, as @JoshuaKolden was saying, doesn't FULLY support sass 3.3 yet. So I'm using sass-rails 4.0.0 instead of the latest version because its dependencies don't seem to mess with the fact that susy and breakpoint need sass 3.3.

@JoshuaKolden, I got it working like this. In my gemfile:

gem 'sass-rails', '~> 4.0.0'
gem 'compass-rails', '~> 1.1.7'
gem 'compass', '~> 1.0.0.alpha.19'
gem 'breakpoint', '2.4.2'
gem 'susy', '2.1.2'

That gem 'compass', '~> 1.0.0.alpha.19' bit was SUPER important. If you don't put that in, compass-rails 1.1.7 uses something like compass 0.12 as its dependency, and the latter REALLY does not play well with sass 3.3.

In my application.rb file:

require File.expand_path('../boot', __FILE__)

require 'rails/all'
require "compass"
require 'breakpoint'
require 'susy'
....rest of file....

I created a config/compass.rb file, following what was done in this blog tutorial, so that I could tell compass to look for files in subdirectories (I was having trouble @import -ing files that were in subdirectories within app/assets/stylesheets). This is how my compass.rb file looks now:

# Require any additional compass plugins here.
project_type = :rails
project_path = RAILS_ROOT if defined?(RAILS_ROOT)
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "public/stylesheets"
sass_dir = "app/stylesheets"
preferred_syntax = :sass
# To enable relative paths to assets via compass helper functions. Uncomment:
# relative_assets = true

additional_import_paths = ["app/assets/stylesheets/basics", "app/assets/stylesheets/products"]

That last line is what tells compass to look for .sass files (and .sass partials) in subdirectories. I suppose I'll have to add to this array if I add more directories to app/assets/stylesheets. There's probably a better way (I'm thinking regex) to do this, but I've only been coding for a few months, so I still struggle with regex.

And then in my application.css.sass file (or other partials ultimately being brought into that file, your call), you implement it all by doing:

@import compass
@import breakpoint
@import susy

Hopefully this will bring you back to Team Susy2!

PS: I'm using rails 4.0.5, in case anyone wants to know! (And I wasn't allowed to even consider changing it as I tried to find a solution...boss has his reasons for wanting that particular release of rails, so finding a way to get all the gems to cooperate was made even harder by the fact that the rails version was set in stone).

[andreasknoepfle]

In case anyone wants to use susy without compass like we do (and in our case we have also bourbon which is requiring sass 3.3) this combination seems to work fine:

sprockets (2.11.0) <-- we had to lock this specific version
sprockets-rails (2.0.1)
sass (3.3.8)
bourbon (4.0.2)
sass-rails (4.0.1)
susy (2.1.2)

[luigi7up]

This dependency issue in Rails 4 with susy2, rails compass and rails sass is still opened as far as I could see around the web...

I just spent 1h trying to add susy 2 to my project... Thamn are those dependencies a bi*ch... To set up rails 4, sass-rails, compass-rails and susy I changed my Gemfile into:

gem 'rails', '~> 4.1.1'
gem 'sass-rails', '~> 5.0.0.beta1'
gem 'compass-rails'
gem 'susy' 

What I didn't want to do, but ended up doing is updating rails from 4.0.3 to 4.1.1 and what bothers me even more is using sass-rails 5.0.0.beta1

[kriskhaira]

sass-rails is now at 5.0.0 and this works for me

gem 'rails', '4.1.2'
...
gem 'sass-rails', '~> 5.0.0'
gem 'compass-rails', '~> 2.0.1'
gem 'susy', '~> 2.1.3'