Skip to content
This repository

Support for rails 3.1 conventions #337

Closed
chriseppstein opened this Issue April 13, 2011 · 208 comments
Chris Eppstein
Owner
  • Stylesheets will be in app/assets/stylesheets
  • Images will be in app/assets/images
  • javascripts will be in app/assets/javascripts

Also need to tie into their asset path system.

Peter Gumeson

So would we need/want to disable sprockets if we were to do this? Or is the goal for compass to start using sprockets for including partials?

Chris Eppstein
Owner

The goal is to single source the asset configuration for rails users. We will teach Sass how to use sprockets for finding imports.

Peter Gumeson

Hooray. I was hoping you were going to say something like that.

Scott Davis
Collaborator

Since imports in sass can be order dependent Im not sure if it makes sense to try to use sprockets to load in the sass partials unless you are saying that a partial is its own sass context then all we need to do is teach sass to write out the correct sprocket comments.

Note: Sprockets is a rack app

Scott Davis
Collaborator

example from the default css in rails 3.1

/*
 * FIXME: Introduce SCSS & Sprockets
 *= require_tree .
*/

https://github.com/sstephenson/sprockets/blob/master/lib/sprockets/processor.rb#L98

also able to do *=require_directory

https://github.com/sstephenson/sprockets/blob/master/lib/sprockets/processor.rb#L80

Chris Eppstein
Owner

What we'll do is make Sass @import directives find things via sprockets. Sass users shouldn't have to use hacky comments to accomplish this behavior. Sass has already implemented this feature, we just need to glue it together.

Peter Gumeson

Yea, this is kind of what I meant. I am just worried that since sprockets is all rack, it might be too late in the request for compass to intervene. I imagine that is why sprockets uses the commented out directives. i.e. the compiled css from sprockets probably has those directives still in them.

Chris Eppstein
Owner

Sass::Plugin is all in rack too. In rails, all compass does is configure things and get out of the way.

Peter Gumeson

Perfect. Good to know.

Aleksander Dąbrowski
tjeden commented May 06, 2011

I wasn't able to make compass work with rails 3.1.0 beta1. Problem was with this directive in css:

@import blueprint

It was searching blueprint in assets, not in compass gem.

Chris Eppstein
Owner

@tjeden it's not implemented yet. Suggest you use the compass cli to compile for now.

Kieran Klaassen

but is there a way of importing the correct compass files in SASS via a short term fix? Looking forward to this 3.1 fix.

Mike Lapshin

If you inspect Sass::Plugin.options in Rails console you'll see they are correct. It seems like load_paths are reset to default value ["."] during CSS compilation. I don't have any idea what causes this problem.

Mario Ricalde

What's the status on this? who's working on it?

Kieran Klaassen

yes, I have to less knowledge to fix it but want it really bad thanks!

Chris Eppstein
Owner

I am working on it. But I'm tied up w/ work stuff for the last week or so.

Mario Ricalde

Why don't you post your findings and thoughts about how to solve the problem? maybe we can solve it if you're too busy.

Chris Eppstein
Owner

I will get to it. I know when and how to delegate.

Mario Ricalde

Roger! Thanks for your hard work <3

Mario Ricalde

On a side note; sprockets seems a bit buggy with the require_tree relative paths out of experimentation.

Scott Davis
Collaborator

in reality require_tree shouldn't be needed when using sass this is i think what the current hold up is mostly about but, im unsure

Chris Eppstein
Owner

require_tree will be supported via glob-based imports:

@import "partials/**/*"
Lawrence curtis

Ok i've found the problem.... it uses tilt to do the rendering, the issue has been fixed in master, so add this to your gemfile and all will be well

gem 'tilt', :git => 'git://github.com/rtomayko/tilt.git'

Lawrence curtis

Seems that fixes a lot of things, but sprites still don't work, get a parser error, why would that be...

Invalid CSS after "...rethink/*.png",": expected function argument, was ");"

Source is
```$rethink-spacing: 2px;
$rethink-search-spacing: 20px;
@import "compass/css3";
@import "sprites/rethink/*.png";
@import "compass/utilities/general/clearfix";

Lawrence curtis

Ok, so if the images live in the public folder then it all works, that error means "i can't find this directory" it seems, now, how hard is it to have sass have the sprites be in app/assets/images and put the compiled png in public/images ?

Chris Eppstein
Owner

Compass has to configure whatever instantiates the Sass::Engine to know about our existence. I will work with sprockets and tilt to provide the correct configuration hooks and then compass will be able to work once we integrate with that.

Lawrence curtis

@chriseppstein to be fair there isn't much to do, by the looks of things, just using head tilt is enough to make everything work

all that's needed is a way to have all your sprites in app/assets/images/ and it compile into public/images if its rails 3.1

Stephen Touset
stouset commented May 18, 2011

Compass needs to also stop writing out finished stylesheets. Rails' asset pipeline handles this now, so Compass should step out of the way.

Chris Eppstein
Owner

Compass has never written a CSS file to disk in a rails environment. Compass always defers to the framework it is embedded within. The only time sass compiles CSS is if you call the CLI.

Scott Davis
Collaborator

@lawrencecurtis once all this is hashed out ill be able to tap into the rails 3 asset pipeline and add the images directory to the sprite importers search path.

Stephen Touset
stouset commented May 18, 2011

For some reason, I'm having stylesheets written out to public/stylesheets when Compass is installed. Any idea why this would be happening?

Stephen Touset
stouset commented May 18, 2011

Also, @import doesn't seem to work against files named (according to 3.1 convention) foo.css.scss. It only finds files named foo.scss.

Chris Eppstein
Owner

stouset these are problems with rails, sass and sprockets.

Stephen Touset
stouset commented May 18, 2011

Fair enough. However, the public/stylesheets issue seems to exist only due to Compass. I've been digging around and haven't found a culprit. If an assets/stylesheets/application.css.scss exists, public/stylesheets/application.css is created if and only if Compass is installed.

Stephen Touset
stouset commented May 18, 2011

I think you're right about having @import use sprockets' require behind the scenes. Without it, Rails can't tell that the file's contents have changed for invalidating caches and asset hash-stamps.

Scott Davis
Collaborator

@stouset we have a fix in the works we are waiting on the sprockets guys to get everything hashed out before we can move forward

Jean Mertz

Any update on this? I tried getting compass to work on Rails 3.1.rc1 using these instructions, but it didn't work for me: http://metaskills.net/2011/05/18/use-compass-sass-framework-files-with-the-rails-3.1-asset-pipeline/

Chris Eppstein
Owner

Ok so here's the deal. Rails gave us a whole 2 weeks notice before putting out their RC and they discarded months of planning and went with a new architecture. In those two weeks we had to prepare, I was busy with work. The Rails API is still not solidified. I was working with yehuda on this last night. But until these core issues are resolved, I cannot add compass support. I AM ON THIS and will not reply to any further posts until I say it is fixed.

bUg.
slbug commented May 24, 2011

@nulvierdrie, it works using rails master, sass master and compass master branches.

Deleted user
ghost commented May 24, 2011

The content you are editing has changed. Reload the page and try again.

Is this the same issue? Everything worked well directly through SASS in Rails 3.0.x

Given:
Rails 3.1rc
/app/assets/stylesheets/subfolder/_stylesheet1.scss
/app/assets/stylesheets/subfolder/_stylesheet2.scss

set variable $main-color in _stylesheet2.scss
use variable $main-color in _stylesheet1.scss

in an scss file in /app/assets/stylesheets I use

@import "subfolder/stylesheet2"
then
@import "subfolder/stylesheet1"

But get an error from stylesheet1 saying the variable $main-color doesn't exist yet.

It's almost like Sprockets is going through and processing the (partial) files in the subfolder in their alphabetical order rather than in the order that they are actually imported into my full scss file.

Sending Request…

Attach images by dragging & dropping or selecting them. Octocat-spinner-32 Uploading your images… Unfortunately, we don't support that file type. Try again with a PNG, GIF, or JPG. Yowza, that's a big file. Try again with an image file smaller than 10MB. This browser doesn't support image attachments. We recommend updating to the latest Internet Explorer, Google Chrome, or Firefox. Something went really wrong, and we can't process that image. Try again.

Stephen Touset
stouset commented May 24, 2011

@chriseppstein No pressure. For what it's worth, my comments were meant to highlight possibly-overlooked ways that Compass is currently incompatible with Rails 3.1 so that they can be considered as well. I've been trying to look into how/why Compass is currently incompatible, but haven't had as much time as I'd like either.

Deleted user
ghost commented May 24, 2011

The content you are editing has changed. Reload the page and try again.

@stouset

You mentioned the assets getting written out to disk automatically (not through the CLI). This could be set within your environment.rb file in your config folder, as something like the following:

Sass::Plugin.options[:template_location] = {"./app/sass" => "./public/stylesheets/"}

This would cause the SASS to write out the compiled application.css file to the specified target, using the format set with something like the following:

Sass::Plugin.options[:style] = :compressed # for production (minified)
Sass::Plugin.options[:style] = :expanded # for development (expanded)

Sending Request…

Attach images by dragging & dropping or selecting them. Octocat-spinner-32 Uploading your images… Unfortunately, we don't support that file type. Try again with a PNG, GIF, or JPG. Yowza, that's a big file. Try again with an image file smaller than 10MB. This browser doesn't support image attachments. We recommend updating to the latest Internet Explorer, Google Chrome, or Firefox. Something went really wrong, and we can't process that image. Try again.

Stephen Touset
stouset commented May 24, 2011

That's precisely the behavior I don't want. And there's no code in my app to do that. It's being done somewhere in the Compass code, AFAICT, but I haven't had the time to determine exactly where.

Scott Davis
Collaborator

Look guys we are working on a fix this isn't just a compass issue it has todo with how sass ties into sprockets you can look around and try and figure stuff out but once the fix is finalized your efforts will possibly be wasted so lets just have some patience we are working hard on getting this working.

If you want to read up on what the core issue was you can read this pull request thread (note it was rejected). sstephenson/sprockets#23

Again have some patience we have a fix in the works

@stouset its probably the sass rack app.

Stephen Touset
stouset commented May 24, 2011

@jetviper21 I am not so convinced. With Compass installed, the behavior in question happens. With Compass not installed, no stylesheets are written to disk. I suspect it has to do with the options Compass configures Sass::Plugin with.

Scott Davis
Collaborator

@stouset yes but, compass configures the rack app for sass. sass doesn't have a railtie, compass does

Stephen Touset
stouset commented May 24, 2011

Right. The Sass rack app does the actual labor, but Compass' configuration of the Sass plugin is most likely the culprit for the undesired behavior.

Deleted user
ghost commented May 24, 2011

The content you are editing has changed. Reload the page and try again.

Ah ya, I just popped that into my Rails 3.1 app and it doesn't work like that even if you want it to (I was thinking to set up my own asset pipeline as with 3.0; the Rails 3.1 pipeline seems inefficient if it really packs all CSS assets together and all JS assets together, as I don't want to have re-serve everything when only certain parts change, or serve up jquery when the user may already have it directly from google, or serve everybody conditional stylesheets that only 5% of users should get, etc).

So, the asset pipeline isn't working, and we can't customize the Sass::Plugin.options to set up our own pipeline efficiently.

Somehow 3.1 just seems rough around a lot of edges still - perhaps a bit underbaked for an RC.

According to this thread and various comments in the source:
Asset pipeline - not quite there.
Http streaming - not quite there.
Identity map - not quite there.

I mean, there's some fantastic stuff here, but it (ALL) still needs some polishing.

Even the built in authentication with has_secure_password is not quite there, as it's functionally sound but needs refactored to take advantage of the serialization API.

It's just frustrating because 3.0 felt so solid with all the refactoring and modularization of the framework, whereas this release feels particularly brittle.

All good things in time I suppose.

Sending Request…

Attach images by dragging & dropping or selecting them. Octocat-spinner-32 Uploading your images… Unfortunately, we don't support that file type. Try again with a PNG, GIF, or JPG. Yowza, that's a big file. Try again with an image file smaller than 10MB. This browser doesn't support image attachments. We recommend updating to the latest Internet Explorer, Google Chrome, or Firefox. Something went really wrong, and we can't process that image. Try again.

Scott Davis
Collaborator

@introspectif

It's just frustrating because 3.0 felt so solid with all the refactoring and modularization of the framework, whereas this release feels particularly brittle.

I couldn't be more on your side with this quote 3.1 is very unrails like in stability

Deleted user
ghost commented May 24, 2011

The content you are editing has changed. Reload the page and try again.

In case others are having problems with partial stylesheets being parsed by Sprocket (in order of appearance under the stylesheets folder) rather than parsed according to the order they are @import'ed into the relevant stylesheet, the easiest solution I found was to
1.) Create a folder under assets, but outside of stylesheets (and thus not in the load path for parsing stylesheets) called something like 'stylesheet_partials'
2.) Within your stylesheet ('main.scss' or whatever) use the path to that folder for your imports, such as @import "../stylesheet_partials/some_subfolder_if_wanted/some_partial_stylesheet.scss";

Sending Request…

Attach images by dragging & dropping or selecting them. Octocat-spinner-32 Uploading your images… Unfortunately, we don't support that file type. Try again with a PNG, GIF, or JPG. Yowza, that's a big file. Try again with an image file smaller than 10MB. This browser doesn't support image attachments. We recommend updating to the latest Internet Explorer, Google Chrome, or Firefox. Something went really wrong, and we can't process that image. Try again.

Jean Mertz

@introspectif could you please elaborate on how you've set up compass with 3.1 and @import?

My steps (which don't work):

  1. add compass gem to gemfile, using require: false, because else it will compile the scss files in public/stylesheets, which we don't want, we want them to be included in the application css file
  2. use compass init rails --prepare (only generates config/compass.rb)
  3. add test.css.scss in app/assets/stylesheets containing @import "compass", @import "../partials/width.css.scss and body { width: $width; }
  4. add app/partials/width.css.scss containing $width: "100px";

When loading the page, the resulting error is:

Error compiling asset application.css:
Sass::SyntaxError: File to import not found or unreadable: compass.
Load path: /Users/Jean/apps/temp/manager/public/stylesheets/sass
  (in /Users/Jean/apps/temp/manager/app/assets/stylesheets/test.css.scss)
Scott Davis
Collaborator

You need to require compass or else you can't @import "compass"

Chris Eppstein
Owner

If you want to help out:

You'll need the following gems checked out via github with the given branch:

  • rails/rails/sass-cleanup
  • chriseppstein/sprockets/engines
  • nex3/sass/stable
  • chriseppstein/sass-rails/master

add gem 'sass-rails' to your Gemfile pointing the :path option at your checkout.

Compass still does not work at this time, now that I have the basic structure in place for sass, I can start working on it.

The sass-rails gem needs tests, both yehuda and I are pretty busy, so if someone wants to write some tests it would move things along more quickly.

Scott Davis
Collaborator

i get some tests done ITS ALL I DO IS WRITE TESTS!

Deleted user
ghost commented May 26, 2011

The content you are editing has changed. Reload the page and try again.

@nulvierdrie

I created a scss-based template of my own a while back that works much like compass. As long as you keep your partials out of the assets/stylesheets directory (for now), you'll be fine.

In other words, you could @import files into any scss file in your assets/stylesheets directory, even linking to the partials in the gem directory, and they would get parsed in the correct order.

The problem is that the partials in the compass gem directory @import other files, and they'll fail because the load path doesn't include the gem directory.

You could copy the stylesheets folder from the compass gem (or get the folder from GIT and skip the gem entirely) into a higher level (like assets/compass) and then just quickly edit the @import paths (there aren't too many levels of depth in compass). That worked fine when I just tried it (simply @import "../compass/compass"; inside any .scss file in the assets/stylesheets directory after making the changes, and everything gets pulled in correctly, in order, and combined into the application.css file as desired.

However, this is obviously a brittle work-around.

It seems like all that's needed is to add the gem's stylesheet directory load path to the default options for sass, so this should be a quick/simple fix. I'd just wait for an update. Or figure out how to append the correct load path into the SASS options, perhaps in an initializer. That would be a much more elegant short-term work-around.

Just some rough ideas.

Sending Request…

Attach images by dragging & dropping or selecting them. Octocat-spinner-32 Uploading your images… Unfortunately, we don't support that file type. Try again with a PNG, GIF, or JPG. Yowza, that's a big file. Try again with an image file smaller than 10MB. This browser doesn't support image attachments. We recommend updating to the latest Internet Explorer, Google Chrome, or Firefox. Something went really wrong, and we can't process that image. Try again.

Jean Mertz

@introspectif

Actually, there is this post: http://metaskills.net/2011/05/18/use-compass-sass-framework-files-with-the-rails-3.1-asset-pipeline/

That together with your partials solution would solve the problems for now I guess, no?

Brent Kirby

If it helps anyone out as a temporary fix :)

What I did was copy the compass and blueprint stylesheets folders from frameworks/ into my vendor/ directory, removing all of the underscores from the file names. (change partials to files)

Gemfile:

gem 'compass', '~>0.11', :require => false

Make sure to use the :require => false or else compass will try to compile to /public/stylesheets

In config/initializers/sass.rb

require 'sass'
require 'sass/plugin'
module Compass
end
require 'compass/browser_support'
require 'compass/configuration'
require 'compass/sass_extensions'         
  Sass::Engine::DEFAULT_OPTIONS[:load_paths].tap do |load_paths|
    load_paths << "#{Rails.root}/vendor"
  end

The link posted by @nulvierdrie was helpful in getting it going. To make it easier to manage, and in case it helps someone else out, I made a very quick (and yes its fairly hacky so..... :) ) plugin for it.

https://github.com/kurbmedia/compass-standalone

Its working fine for us so far on 3.1.0.rc1 (ruby 1.9.2), I haven't tried sprites etc (I'm going to assume that will have issues?) but so far it looks like all the blueprint/css3 stuff works fine. If anyone uses it and has a fix please send a pull request so it can be merged in and hopefully this solves some problems until an official solution.

Mario Ricalde

Temporary fix: use compass watch with /config.rb:

# Set this to the root of your project when deployed:
project_type      = :stand_alone

http_path         = "/assets/"

css_dir           = "app/assets/stylesheets/"
sass_dir          = "app/compass/"
images_dir        = "app/assets/images/"
http_images_path  = "/assets/"
javascripts_dir   = "js"

line_comments     = true
project_type      = :stand_alone # can be :stand_alone or :rails.
output_style      = :expanded # :nested, :expanded, :compact, or :compressed.
relative_assets   = false

Just run compass watch on your project root and you're good to go. ;D

Chris Eppstein
Owner

I've just submitted a pull request to rails for proper sass integration via the sass-rails plugin. rails/sass-rails#2 Once this is accepted, I will be able to support rails in compass.

Mario Ricalde

Awesome news chris! thank you for your hard work :)

Jean Mertz

Great work chris, thanks a lot. Let's hope it makes it in before Rails 3.1 final...

Gaël Deest

Great news !

@nulvierdrie: it would be a shame if it didn't. What's the point of claiming you're supporting SASS and making headlines about it, when this support is clearly broken and all we have is synctatic sugar ?

Ivo Trompert

This is great news

Kieran Klaassen

Awesome! Thank for the hard work!

Jean Mertz

Now onto the important question: has anyone got this working in a new rails 3.1 project?

Do I just create a new 3.1 rc1 app and add gem "sass-rails" and gem "compass", or do I have to wait for the changes to be implemented in rc2 (hopefully) to use the new functionality?

Daniel Fischer

@chriseppstein thanks for the patch. Your hard work is appreciated.

Felix Andersen

@nulvierdrie I tried and had problems. According to @chriseppstein's latest comment code needs to be written in compass to tie in to rails asset system. That code does not exist yet, but once it does this issue thread will be closed and it will just Work™

Scott Davis
Collaborator

chris is super busy but he has started working on it hopefully he pushes a topical branch soon and ill get it finished

Joe Parker

@nulvierdrie I got sass, compass & blueprint working by creating a config/initializers/sass.rb file with this content:

Sass::Engine::DEFAULT_OPTIONS[:load_paths].tap do |load_paths|
  load_paths << "#{Rails.root}/app/assets/stylesheets"
  load_paths << "#{Gem.loaded_specs['compass'].full_gem_path}/frameworks/compass/stylesheets"
  load_paths << "#{Gem.loaded_specs['compass'].full_gem_path}/frameworks/blueprint/stylesheets"  
end

This is based off the MetaSkills thread referenced above. Note: I only have .scss files in the app/assets directory.

Chris Eppstein
Owner

Be sure to rip out all these hacks and that initializer when we do the next release.

Joe Parker

@chriseppstein Noted. Thanks!

Brandon Hays

When this is fixed, will partials work properly? My hacks are making baby Jesus cry.

Scott Davis
Collaborator
Claudio Poli

Waiting eagerly on updates, if there is something we/I can do please let us know.

Currently on Rails 3.1-stable git and sass-rails (git) adding load_paths to Sass doesn't activate extra load paths anymore like it did few days ago.

Thanks!

Chris Eppstein
Owner

https://github.com/chriseppstein/compass/commits/rails31

Installation:

  • rails using the 3-1-stable branch from git
  • sass-rails from git
  • latest sass release
  • latest sprockets release
  • compass using the rails31 branch from git

Pull requests will now be gladly accepted against this branch. Things that remain:

  • asset host integration
  • asset timestamp invalidation
  • sort out sprite image generation and integration with sprockets (should they go into images_dir or should a sprite_output_dir be added that defaults to images_dir but would be different in rails)
  • anything else that I missed :)

@masterkain The way you add entries to the sass load path is to call add_import_path in your compass config or adding them to app.config.sass.import_path in your rails config.

Claudio Poli

Thanks @chriseppstein, latest commit I'm on is

https://github.com/rails/rails/commit/80745f19c486e5feb98d74ba02eb1bab97b26094

but I think something is missing here because assets aren't getting found:

ActionController::RoutingError (No route matches [GET] "/stylesheets/application.css")

I think this pull request might fix it: rails/rails#1473 (comment) but again, it should not be a problem with compass itself, once they fix it I'll take a look.

In the meantime I removed all hacks and initializers, can you confirm that

config.sass.import_path = "#{Gem.loaded_specs['compass'].full_gem_path}/frameworks/compass/stylesheets"

is a way to go in application.rb?

Thanks.

Chris Eppstein
Owner

@masterkain You don't need to add compass to the import path. And your http urls should be /assets/application.css, but if you're using stylesheet_link_tag you should be insulated from such details.

Claudio Poli

@chriseppstein, ah I see, good to know, thanks.

Yes, I'm using a normal stylesheet_link_tag but something is definitely broken in rails, it was working few commits ago.

Chris Eppstein
Owner

Sorry, just pushed a commit to sass-rails that I had locally and is needed to make sprites work in rails.

Jim Jones
aantix commented June 04, 2011

I was able to get the latest commits up and running with a new 3.1 app with the following (I am utilizing Blueprint). This assumes that you have a Rails 3.0.x application with Compass installed that you can reference from.

1) Gemfile
gem 'sass-rails', :git => 'https://github.com/rails/sass-rails.git'
gem 'compass', :git => "https://github.com/chriseppstein/compass.git", :branch => "rails31"

2) Renamed
app/assets/stylesheets/application.css
to
app/assets/stylesheets/application.css.scss
(not sure why Rails 3.1 isn't defaulting to the .scss extension here)

3) All of the Compass imports that previously existed in app/stylesheets/screen.scss in the 3.0 app were pasted into app/assets/stylesheets/application.css.scss

4) Moved app/stylesheets/partials/_base.scss to app/assets/stylesheets so that the path is now app/assets/stylesheets/partials/_base.scss

Claudio Poli

I pasted a gist here with some examples: https://gist.github.com/1007518

Brad Phelan

I've got some problems with compass with rails 3.1 that haven't been mentioned above.

https://gist.github.com/1014261

I'm getting errors such as

Started GET "/m/logger" for 127.0.0.1 at 2011-06-08 13:37:06 +0200
  Processing by M::LoggerController#show as HTML
  User Load (0.1ms)  SELECT "users".* FROM "users" WHERE "users"."id" = 3 LIMIT 1
Rendered m/logger/show.html.haml within layouts/mobile (1.3ms)
Completed 200 OK in 211ms (Views: 60.6ms | ActiveRecord: 1.1ms)
Warning. Error encountered while saving cache /Users/bradphelan/workspace/mysugr/mysugrapp/tmp/sass-cache/c9aa55516c7f4d0a790c9d7e348ce1fe17fae810/mobile.css.sassc: can't dump anonymous class #<Class:0x000001027be938>

and then failures to resolve variables that are defined in @import'd partials.

The error seems to be coming from

lib/sass/cache_stores/base.rb
 45       # Store a {Sass::Tree::RootNode}.
 46       #
 47       # @param key [String] The key to store it under.
 48       # @param sha [String] The checksum for the contents that are being stored.
 49       # @param obj [Object] The object to cache.
 50       def store(key, sha, root)
 51         _store(key, Sass::VERSION, sha, Marshal.dump(root))
 52       rescue TypeError, LoadError => e
 53         Sass::Util.sass_warn "Warning. Error encountered while saving cache #{path_to(key)}: #{e}"
 54       end

I've tried pp'ing puts'ing and to_s'ing the root object at this point but all i get is an error that nilclass has
no method 'members

Jean Mertz

@chriseppstein, with 3.1.0.rc2 out, have the changes you proposed to make compass work with rails 3.1 been added in? And if so, does compass now work with 3.1.0.rc2 or are there still changes needed on the compass side?

Thanks.

Oriol Gual

I'm having the same problem as @bradphelan (with Rails 3.1.0.rc2)

Brad Phelan

This might help. I popped open RDebug at the exception point and tried to display the root. Got this backtrace


 # Store a {Sass::Tree::RootNode}.
 #
 # @param key [String] The key to store it under.
 # @param sha [String] The checksum for the contents that are being stored.
 # @param obj [Object] The object to cache.
 def store(key, sha, root)
   _store(key, Sass::VERSION, sha, Marshal.dump(root))
 rescue TypeError, LoadError => e
   require 'ruby-debug'
   debugger
   Sass::Util.sass_warn "Warning. Error encountered while saving cache #{path_to(key)}: #{e}"
 end

and got the following stack trace


(rdb:2) root
INTERNAL ERROR!!! undefined method `members' for nil:NilClass
    /Users/bradphelan/.rvm/gems/ruby-1.9.2-p180@mysugrapp/gems/activesupport-3.1.0.rc2/lib/active_support/whiny_nil.rb:48:in `method_missing'
    /Users/bradphelan/.rvm/gems/ruby-1.9.2-p180@mysugrapp/gems/sass-3.1.2/lib/sass/tree/visitors/to_css.rb:143:in `block in visit_rule'
    /Users/bradphelan/.rvm/gems/ruby-1.9.2-p180@mysugrapp/gems/sass-3.1.2/lib/sass/tree/visitors/to_css.rb:18:in `with_tabs'
    /Users/bradphelan/.rvm/gems/ruby-1.9.2-p180@mysugrapp/gems/sass-3.1.2/lib/sass/tree/visitors/to_css.rb:132:in `visit_rule'
    /Users/bradphelan/.rvm/gems/ruby-1.9.2-p180@mysugrapp/gems/sass-3.1.2/lib/sass/tree/visitors/base.rb:37:in `visit'
    /Users/bradphelan/.rvm/gems/ruby-1.9.2-p180@mysugrapp/gems/sass-3.1.2/lib/sass/tree/visitors/to_css.rb:10:in `visit'
    /Users/bradphelan/.rvm/gems/ruby-1.9.2-p180@mysugrapp/gems/sass-3.1.2/lib/sass/tree/visitors/to_css.rb:27:in `block in visit_root'
    /Users/bradphelan/.rvm/gems/ruby-1.9.2-p180@mysugrapp/gems/sass-3.1.2/lib/sass/tree/visitors/to_css.rb:25:in `each'
    /Users/bradphelan/.rvm/gems/ruby-1.9.2-p180@mysugrapp/gems/sass-3.1.2/lib/sass/tree/visitors/to_css.rb:25:in `visit_root'
    /Users/bradphelan/.rvm/gems/ruby-1.9.2-p180@mysugrapp/gems/sass-3.1.2/lib/sass/tree/visitors/base.rb:37:in `visit'
    /Users/bradphelan/.rvm/gems/ruby-1.9.2-p180@mysugrapp/gems/sass-3.1.2/lib/sass/tree/visitors/to_css.rb:10:in `visit'
    /Users/bradphelan/.rvm/gems/ruby-1.9.2-p180@mysugrapp/gems/sass-3.1.2/lib/sass/tree/visitors/base.rb:24:in `visit'
    /Users/bradphelan/.rvm/gems/ruby-1.9.2-p180@mysugrapp/gems/sass-3.1.2/lib/sass/tree/node.rb:133:in `to_s'
    /Users/bradphelan/.rvm/gems/ruby-1.9.2-p180@mysugrapp/gems/ruby-debug19-0.11.6/cli/ruby-debug/commands/eval.rb:47:in `inspect'
    /Users/bradphelan/.rvm/gems/ruby-1.9.2-p180@mysugrapp/gems/ruby-debug19-0.11.6/cli/ruby-debug/commands/eval.rb:47:in `block in execute'
    /Users/bradphelan/.rvm/gems/ruby-1.9.2-p180@mysugrapp/gems/ruby-debug19-0.11.6/cli/ruby-debug/commands/eval.rb:19:in `run_with_binding'
    /Users/bradphelan/.rvm/gems/ruby-1.9.2-p180@mysugrapp/gems/ruby-debug19-0.11.6/cli/ruby-debug/commands/eval.rb:46:in `execute'
    /Users/bradphelan/.rvm/gems/ruby-1.9.2-p180@mysugrapp/gems/ruby-debug19-0.11.6/cli/ruby-debug/processor.rb:280:in `one_cmd'
    /Users/bradphelan/.rvm/gems/ruby-1.9.2-p180@mysugrapp/gems/ruby-debug19-0.11.6/cli/ruby-debug/processor.rb:261:in `block (2 levels) in process_commands'
    /Users/bradphelan/.rvm/gems/ruby-1.9.2-p180@mysugrapp/gems/ruby-debug19-0.11.6/cli/ruby-debug/processor.rb:260:in `each'
    /Users/bradphelan/.rvm/gems/ruby-1.9.2-p180@mysugrapp/gems/ruby-debug19-0.11.6/cli/ruby-debug/processor.rb:260:in `block in process_commands'
    /Users/bradphelan/.rvm/gems/ruby-1.9.2-p180@mysugrapp/gems/ruby-debug19-0.11.6/cli/ruby-debug/processor.rb:253:in `catch'
    /Users/bradphelan/.rvm/gems/ruby-1.9.2-p180@mysugrapp/gems/ruby-debug19-0.11.6/cli/ruby-debug/processor.rb:253:in `process_commands'
    /Users/bradphelan/.rvm/gems/ruby-1.9.2-p180@mysugrapp/gems/ruby-debug19-0.11.6/cli/ruby-debug/processor.rb:173:in `at_line'
Brad Phelan

Actually I think the cache error is irrelevant. My real problem is that the variables will not get imported from mixins but the css will.

Brad Phelan

No description provided.

Oriol Gual

No luck here @bradphelan. We are also using compass + blueprint so maybe this is the problem.

Brad Phelan
Brad Phelan

I figured out my problem with the variables not being imported.

My partials were named

_foo.sass

and then

@import foo

would only import the css not the vars

but

if I renamed it

_foo.css.sass

then all is well. Too much magic foo going on here :)

Dave Bradford

@bradphelan - make sure your sass partial filenames are "_partial.css.sass"! Rails 3.1 is expecting "css.sass" or "css.scss". I was having problems with my partials too until I renamed them. Hope that helps.

Oriol Gual

LOLZ, @bradphelan @zerobearing2 that was what was happening to me!

Ivo Trompert

It looks like Sass convert the scss to css, on per file bases, and then give the css to Sprockets to combine it so that it is one css file.

The problem with that is that it is not posible to create one file with all the mixens (including compass) you need for a project, and automatically import it for every file so that you have access to all mixens in all the scss files. Or am I wrong on this point (I hope so)?

Chris Eppstein
Owner

@ivotrompert I will investigate. It would be great if you can make a failing test case in sass-rails.

Jesse Breuer

I recently got compass working on 3.1 rc1. Was trying to set up blueprint modules, and saw that what was generated seems to be meant for rails 3.0 architecture. Is there a good resource or tutorial out yet as to what modifications to make to run blueprint compass on 3.1?

Jesse Breuer

To answer my own question in case it helps anyone, the best directions I've seen are here:
http://metaskills.net/2011/05/18/use-compass-sass-framework-files-with-the-rails-3.1-asset-pipeline/
and if you read the first comment it explains an easy way to get blueprint working.

Jean Mertz

@JesseBreuer actually if you look in the comments above you will find that link in the comments, and some other tips on how to get it working properly. Obviously this isn't the way it should/wil work in 3.1 final, but for now, yes that will work.. somewhat.

Stephen McGinty
ginty commented June 09, 2011

@ivotrompert It is possible to add all your imports to one file, however to do so it seems that you have to call all your files blah.css.scss. I just had blah.scss and in that case the sub files could not access the global imports.

Pedro Nascimento
lunks commented June 10, 2011
#Gemfile
gem 'sass-rails', :git => 'https://github.com/rails/sass-rails.git'
gem 'compass', :git => "https://github.com/chriseppstein/compass.git", :branch => "rails31", :require => false
#config/initializers/sass.rb
require 'compass/util'
require 'compass/browser_support'
require 'compass/sass_extensions'
require 'compass/version'
require 'compass/errors'
Sass::Engine::DEFAULT_OPTIONS[:load_paths].tap do |load_paths|
  load_paths << "#{Rails.root}/app/assets/stylesheets"
  load_paths << "#{Rails.root}/app/assets/images"
  load_paths << "#{Gem.loaded_specs['compass'].full_gem_path}/frameworks/compass/stylesheets"
end

This seem to work, but not for sprites.

Note: I tried to add the images path to see if it could find my images and generate the sprites, without success. Compass can't find the folder when I write 'load folder/*.png' on any scss.

Brent Kirby

You don't need the initializer. Removing the :require => false, and updating rails to rc3 should work fine.

I'm also using sass-rails at 3.1.0.rc.2, haven't tried master recently.

Sprites don't seem to work with asset pipeline however. Compass is finding the images in app/assets, but for some reason once the sprite is generated it still sets the url in the compiled css to /images so sprockets doesn't pick it up. Adding

config.compass.images_dir = "public/images"

to application rb, and using public/images for your sprites folder will fix it for now.

Marc-André Lafortune

@ivotrompert: thanks a 10^6, I renamed my file and bingo.

Scott Davis
Collaborator
Brent Kirby

@jetviper21 nice! I was going through the source trying to figure it out but I haven't had time to wrap my head around everything thats in there :)

Should I point to master now or stick with the rails31 branch?

Scott Davis
Collaborator
Mario Ricalde

I'm using master standalone with rails 3.0 <3 that's how I fixed the bug. Not a big deal-

Manuel Meurer

I still can't get Compass to run. I am using

gem 'sass-rails', :git => 'https://github.com/rails/sass-rails.git'
gem 'compass', :git => 'https://github.com/chriseppstein/compass.git', :branch => 'rails31'

in my Gemfile but when I try to include a Compass mixin, I get

Sass::SyntaxError: Undefined mixin '...'

Just to confirm: there is no initializer or config/compass.rb needed?

EDIT:

False alarm, once I added the @import 'compass/...' to that file, it worked. Until now it was possible to @import Compass in one partial, use it in another and @import both partials into a main file and it would work. Now the Compass @import has to be in the main file it seems.

Brent Kirby

no initializer needed. Make sure all of your files use .css.scss extensions for sprockets. I don't think imports/variables are inherited (yet?), what I did was make a _globals.css.scss file and put all of my compass imports, setup (blueprint grid etc) and variables in it. If your only adding variables/imports to it, it won't actually add additional css, so you can just import that globals file inside each css.scss file and it should work fine.

Chris Eppstein
Owner

@brentkirby imports and variables should work as expected in a normal sass project but of course the extensions have changed.

Brent Kirby

Does that apply to sprockets/asset pipeline? I haven't tried since pull from rails31 / upgrade to rc4. Of course it could just be in how I'm using it with sprockets, not a lot of documentation yet :)

Chris Eppstein
Owner

@brentkirby post gist I'm confused.

Brent Kirby

here you go

https://gist.github.com/1020932

When home.css.scss is processed it throws

Sass::SyntaxError (Undefined mixin 'column'.

Real quickly I tried require 'includes/setup' and require 'includes/_setup' in screen.css.scss but no luck. depend_on doesn't work either. I just figure it doesn't work natively with sprockets yet.

If inside home.css.scss i add @import 'includes/setup' then everything is fine, I just have to do that inside each file. All of the sass/compass stuff works correctly like it always has... so like you said it works fine. I figured eventually the idea is to let sprockets jump in so doing something like depend_on 'includes/setup' in the manifest will make the imports/mixins/variables available to any sass file compiled after that. Thats what I was referring to :)

Brent Kirby

Forgot something :)

With the asset pipeline would it maybe make sense to have a compass-rails plugin etc versus the current gem? If you drop the framework files into vendor/ and do a little tweaking most of it works pretty well. It seemed like as long as the sass functions were added and the framework files were available that may work a lot better. With sass @import working with sprockets manifests it seems like that would be pretty easy to do. Maybe I'll take a stab at it.

Chris Eppstein
Owner

I don't think compass-rails is necessary at this time.

Rainer Blessing

I don't know if it's an issue with compass and Rails 3.1: I get the error: "Sass::SyntaxError (Undefined operation: "-compass-list-size(compact(linear-gradient( ...".

bicepjai

does compass work with rails 3.1.0.rc4 ??

Brad Phelan
bicepjai
Brad Phelan

You have found the thread where this was discussed and most of the issues solved. I suggest if you have a specific problem or error then post it here and somebody might be able to help you. In general you need to have the following in your Gemfile

 gem 'sass-rails', :git => 'https://github.com/rails/sass-rails.git'
 gem 'compass', :git => 'https://github.com/chriseppstein/compass.git', :branch => 'rails31'

and make sure you name your files

foo.css.scss
or
foo.css.sasss

but not

foo.scss
foo.sass

or it will not work

bicepjai
Miha Filej
mfilej commented June 17, 2011

Confirming what @manuelmeurer reported, imports are not inherited from application.css.sass.

Minimal example (or clone the repo):

/app/assets/stylesheets/application.css.sass:

//= require_self
//= require_tree .

@import "compass/utilities/general/clearfix"

/app/assets/stylesheets/test.css.sass:

// Uncommenting the line below solves the problem
// @import "compass/utilities/general/clearfix"

body
  +clearfix

Versions:

$ bundle show compass
/Users/miha/.rvm/gems/ruby-1.9.2-p0/bundler/gems/compass-696d84562d63
$ bundle show sass-rails
/Users/miha/.rvm/gems/ruby-1.9.2-p0/bundler/gems/sass-rails-4771b3f3f064
$ bundle show rails
/Users/miha/.rvm/gems/ruby-1.9.2-p0/gems/rails-3.1.0.rc4

Accessing /assets/application.css gives:

Sass::SyntaxError

Undefined mixin 'clearfix'.
  (in /private/tmp/compass-import-test/app/assets/stylesheets/test.css.sass)
Claudio Poli

try removing the sprockets directives in /app/assets/stylesheets/application.css.sass

Manuel Meurer

@mfilej, actually, what I meant was this:

application.css.scss

@import './partials/one';
@import './partials/two';

partials/_one.css.scss

@import 'compass/css3';

partials/_two.css.scss

div {
  @include border-radius(5px);
}

This used to work, but now the mixin border-radius cannot be found.
It's fixed by moving the @import to application.css.scss, which makes sense anyways IMO, so it's not a big deal.

EDIT:
Changed //= require to @import. Sorry, typo.

Scott Davis
Collaborator

you shouldn't need the //=require if your using scss
just use @import

Manuel Meurer

@jetviper21, you're right, I mistyped. I'm using @importeverywhere, not //= require.

Scott Davis
Collaborator
Miha Filej
mfilej commented June 17, 2011

@manuelmeurer uh, I see now it's not quite the same.

@masterkain thanks! That was the issue, now it works fine. Full steam ahead! :)

James Alexander Rosen

I'm geting undefined method 'Error' for Compass:Module. My setup is in this Gist. I don't re-import compass and my globas in each .css.scss file as the above thread seems to indicate that is now unnecessary.

Later

I figured out what this was. In one of my .css.scss files I was trying to do @import "foo.scss", which had been renamed to foo.css.scss. A nicer error message would be lovely, but the framework does work with the setup linked above.

Manuel Meurer

@jamesarosen You don't need to add any suffix to your imports, @import "foo" should work just fine.

Derek Prior

I'm sure i'm doing something silly here... I'm using the github versions of the compass rails31 branch and sass-rails. I have created a partial named _base.css.scss that contains the imports for compass/reset, blueprint-liquid, and blueprint-typography. I then have a layout.css.scss file that includes my base partial.

When rails compiles this into application.css, I'm seeing reset and typography twice.

I've posted this gist with the pertinent files

Chris Eppstein
Owner

@derekprior sprockets doesn't know about partials so you need to change application.css to application.css.scss and use the following contents:

@import "**/*"
Derek Prior

When I do that, no /assets/application.css file ends up being generated (and I get an invalid route trying to access it). I must be misunderstanding this process somewhere along the way.

If it matters, this is a "green field" rails 3.1 app (not upgraded).

Derek Prior

disregard - when renaming application.css.scss I accidentally moved it to the root of the app directory. Whoops.

Samuel Cochran
sj26 commented June 19, 2011

I just sent a pull request to fix referencing images and other assets to the rails31 branch so stuff like replace-text and image-url now works and renders the correct HTTP path for images, fonts, etc.

Alexey Poimtsev

Hi,
in new app with following lines in Gemfile
gem 'sass-rails', :git => 'https://github.com/rails/sass-rails.git'
gem 'compass', :git => 'https://github.com/chriseppstein/compass.git', :branch => 'rails31'

i see version conflict

 Bundler could not find compatible versions for gem "railties":
   In Gemfile:
     sass-rails depends on
       railties (~> 3.2.0.beta)
     rails (= 3.1.0.rc4) depends on
       railties (3.1.0.rc4)

Any idea how to solve it?

Claudio Poli

you need to specify the branch:

group :assets do
gem "sass-rails", git: "git://github.com/rails/sass-rails.git", branch: "3-1-stable"
gem "coffee-rails", git: "git://github.com/rails/coffee-rails.git", branch: "3-1-stable"
gem "uglifier", git: "git://github.com/lautis/uglifier.git"
end

Chris Eppstein
Owner

@alec-c4 You need to change sass-rails 3.1.0.rc.4, the version you have has been yanked.

Claudio Poli

@chriseppstein, how far are we from seeing the rails31 branch merged in master? :)

Chris Eppstein
Owner

working on it.

Jean Mertz

Has anyone in here figured out how to use .erb with compass?

Right now my asset file (the file that gets loaded and loads all the other css files) looks like this:

# application.css.scss
//*= require_self
//= require jquery-ui

// defaults
@import "compass";
@import "test.css.scss";
# test.css.scss
body { background-image: url("/images/bg.png"); }

This works perfectly, except for when I want to start serving images from the assets directory as well. This requires the file to be renamed .css.scss.erb to use images_path(), but how would I do this?

Do I rename application.css.scss to application.css.scss.erb? Or test.css.scss to test.css.scss.erb?

I tried both, but in the first case of application, it won't parse test.css.scss because of invalid markup (the erb tags).

In the second case, sprocket really only touches application.css.scss.erb and compass imports all other scss files into this file, so the erb is never compiled, and sass complains about invalid file extension .erb.

Any clues to this? Or is this still in development (and not available in master)?

Deleted user
ghost commented July 06, 2011

The content you are editing has changed. Reload the page and try again.

@JeanMertz if i understand you want to use erb to serve images starting from image assets folder.
If this is right you don't need this.

Instead of "url()" css default function use "image-url" helper as stated here: http://compass-style.org/reference/compass/helpers/urls/

This helper should resolve asset path.

Sending Request…

Attach images by dragging & dropping or selecting them. Octocat-spinner-32 Uploading your images… Unfortunately, we don't support that file type. Try again with a PNG, GIF, or JPG. Yowza, that's a big file. Try again with an image file smaller than 10MB. This browser doesn't support image attachments. We recommend updating to the latest Internet Explorer, Google Chrome, or Firefox. Something went really wrong, and we can't process that image. Try again.

Brent Kirby

I'm pretty sure you still need to be using the rails31 branch as well

Jean Mertz

@vchiodino Thank you for the help. Will this work the same as the erb-style, including the hash value to the image name in production?

Also, do you use sprites, and does it work for you? I just can't seem to get it to work the way it's described in this tutorial.

Here is what I use, and the error it returns:

@import "/images/editor/toggle/*.png";
@include all-icon-sprites;
2011-07-07 09:38:00 [ERROR] Error compiling asset admin.css: (pid:7370)
2011-07-07 09:38:00 [ERROR] Sass::SyntaxError: Invalid CSS after "...oggle-clean-up,": expected function argument, was ");"
  (in /Users/Jean/apps/manager/app/assets/stylesheets/admin.css.scss) (pid:7370)

Sass::SyntaxError (Invalid CSS after "...oggle-clean-up,": expected function argument, was ");"
  (in /Users/Jean/apps/manager/app/assets/stylesheets/admin.css.scss)):
  app/assets/stylesheets/private/editable_blocks.css.scss:1
  app/assets/stylesheets/admin.css.scss:21

Here is my (relevant) Gemfile:

gem "rails", git: "git://github.com/rails/rails.git", branch: "3-1-stable"
gem "tilt", git: "git://github.com/rtomayko/tilt.git"
gem "sass"
gem "compass", git: "git://github.com/chriseppstein/compass.git", branch: "rails31"
gem 'sass-rails', git: "git://github.com/rails/sass-rails.git", branch: "3-1-stable"
Pavel Pravosud
rwz commented July 07, 2011

I'm using rails31 branch, but all assets paths helpers are not working for me.

For example when i do background: image_url('logo.png') i'm getting url('/images/logo.png'). But the right path is /assets/logo.png

This is my Gemfile:

gem 'sass-rails', git: 'git://github.com/rails/sass-rails.git', branch: '3-1-stable'
gem 'compass', git: 'git://github.com/chriseppstein/compass.git', branch: 'rails31'
gem 'coffee-rails', git: 'git://github.com/rails/coffee-rails.git', branch: '3-1-stable'

What do i do wrong?

Pavel Pravosud
rwz commented July 07, 2011

The only way i see it is to use lame code like this:
background: url(asset_path('bg.jpg', 'images'))

It works this way.

Stephen McGinty
ginty commented July 07, 2011
Marc Chung
mchung commented July 07, 2011

@rwz @ginty

  1. No need for the symbolic link.
  2. Use asset_url, which is documented over here. For example: asset_url("rails.png", image) becomes url(/assets/rails.png)
    • As a convenience, for each of the following asset classes there are corresponding _path and _url helpers: image, font, video, audio, javascript, stylesheet.

My Gemfile

gem "compass", git: "git://github.com/chriseppstein/compass.git", branch: "rails31"
gem 'sass-rails', git: "git://github.com/rails/sass-rails.git", branch: "3.1.0.rc.3"
Pavel Pravosud
rwz commented July 08, 2011

Got the image_url to work by adding initializer:
Compass.configuration.http_images_path = '/assets'

Pavel Pravosud
rwz commented July 11, 2011

Even with initializer mentioned above all compass helpers that use *-url helpers internally do not work in production.
Sprites do not work either.

Basically, compass is totally incompatible with rails 3.1 for now.

Samuel Cochran
sj26 commented July 11, 2011

Mmm, the rails31 branch doesn't seem to fall through to the sass-rails functions which will work.

I'm back to using my fork's rails31 branch which works in production by using Sprockets' asset tag helpers.

Samuel Cochran
sj26 commented July 11, 2011

(Ideally, compass should not define *_url and *_path helpers in Rails 3.1, this is done for us by sass-rails.)

Daniel Fischer

Spriting doesn't use the /asset prefix. Depends upon "/images" in rails 3.1 project.

url("/images/ui-s80112416a3.png") no-repeat scroll 0 0 transparent

Pavel Pravosud
rwz commented July 14, 2011

@sj26 using your branch. All*-url helpers works fine in production, except sprites.

compass generates sprite paths like /assets/categories-s40cf83bd1c.png, but assets:precompile generates files with names like categories-s40cf83bd1c-85a4960caf1fd144dbcd4f9f8fb134f7.png

Do you have any idea how to fix this? I've heard you got your branch in production just fine.

Samuel Cochran
sj26 commented July 14, 2011

@rwz Honestly I've not been using sprites (naughty me). I hear there are good ways to do sprites the rails way(tm) these days, but haven't looked into it.

I might take a squiz at compass sprites in rails 3.1 when I get a chance.

Jens Bissinger
dpree commented July 15, 2011

how i got rails31+compass+sprites finally working for me http://uberfork.com/post/7651220989/rails3-1-and-sass-compass-image-sprites

Pavel Pravosud
rwz commented July 15, 2011

@dpree not gonna work in production

David Bock

I'm having a problem that I have reduced to its simplest case, and in doing so realized I can reproduce it using nothing from compass but conventions. Still, this seems like the best place to ask. I'm unable to define a variable in my assets/stylesheets/partials/_base.scss and be able to use it in another partial, even when I'm 100% sure the file is being properly included.

Relevant contents of my gemfile (I have upgraded everything that seems relevant to the latest stuff):

gem 'rails', :git => "git://github.com/rails/rails.git", :branch => "3-1-stable"
gem "compass", :git => 'https://github.com/chriseppstein/compass.git', :branch => 'rails31'
gem 'sass-rails', :git => 'https://github.com/rails/sass-rails.git', :branch => '3-1-stable'

My screen.css.scss (I removed the application.css both to avoid sprockets stuff and to look more like the rails 3.0/compass conventions I'm used to):

@import "partials/base";
@import "partials/page";

partials/_base.scss:

$chalkboard: #304548;

partials/_page.scss

@import "partials/base";

.test_class {
  background-color: $chalkboard;
}

(I realize that import shouldn't be needed, but I added it trying to solve the problem).

The error I'm seeing on page refresh:

Undefined variable: "$chalkboard".
  (in /Users/dbock/experiments/compasstake2/app/assets/stylesheets/partials/_page.scss)
  (in /Users/dbock/experiments/compasstake2/app/assets/stylesheets/screen.css.scss)

Surely other people on this forum are upgrading their rails apps and successfully @importing their _base.scss files.... yes?

Jean Mertz

Not sure, since you're not using sprockets, but I still think you need to name your partials .css.scss, same as all the other scss files in rails 3.1.

David Bock

I tried that too, it made no difference. For what its worth, I'm positive the files are being included - if I rename them I get an error about the file not being there, and if I include css in them it is emitted. It just seems like variables aren't persisted from one scss evaluation to the next.

Samuel Cochran
sj26 commented July 16, 2011

$chalkboard != $charcoal, your original source extract said $charcoal. Are you still having this problem? If so, I suspect it's unrelated.

David Bock

@sj26 sorry, no, that was a 1:00am brain dead transcription error into comments, not an actual error in the code. The code in the above comment is now faithful to the example I have that fails.

In the light of a new day I resolved the issue, but in a way that doesn't clue me into the original problem; I blew away my bundle install (which I put into a local vendor directory) and rebundled - the issue went away. I might try to step back through the versions of component I was using, but running with the latest gem versions (the branches in my gemfile above) has resolved the issue.

Hesham Amiri

I have followed the discussion above but it seems that all these changes are a bit over my head.

I have created a new rails app (rc4) and added the following to my gem file:

gem "compass", :git => 'https://github.com/chriseppstein/compass.git', :branch => 'rails31'
gem 'sass-rails', :git => 'https://github.com/rails/sass-rails.git', :branch => '3-1-stable'

I installed compas with :

compass init rails --using blueprint/semantic

I got a number of stylesheets in app/stylesheets. Now what do I do next? I followed most of the steps mentioned above but no success.

Would really appreciate if someone can point me in the right direction, being away from rails, 3.1 and all of this asset pipeline issue is way to much change for me to handle.

Samuel Cochran
sj26 commented July 18, 2011

The sprites problem seems to be a race. Sprites are generated by compass after/during the asset precompilation process which means they aren't copied into public/assets, and aren't served by your static fileserver, neither does sprockets know the checksum of the (not yet) generated files to create the proper path to the asset.

Jean Mertz
Manuel Meurer

@JeanMertz Jepp, that's pretty much my approach as well. I got most of it working (not the sprites yet) but will not invest any more time in fiddling around until Rails 3.1 final is out.

Jimmy Huang

@bokmann try to rename your _base.scss to _base.css.scss, I met the same problem and got the 'Undefined variable' error, then fixed by renaming the partial file. I don't know the reason, but it works for me. I also hope the feature version can fix this problem.

Hesham Amiri

Though the following blog post says it is no longer necessary to do the steps, but I was able to get compass working:

http://metaskills.net/2011/05/18/use-compass-sass-framework-files-with-the-rails-3.1-asset-pipeline/

However, I still cannot use blueprint stylesheets for example this wont work:

@import "compass";
@import "blueprint";

body{
background: black;
@include +linear-gradient(color-stops(white, black));
@include +column(5);
}

Hesham Amiri

ok I think i got it, I need to specifically include the blueprint mixin i want to use

Also and as stated everywhere in this ticket, no need for the sass initializers

Daniel Fischer

So what's the agreed upon structure to avoid CSS duplication as of now?

Chris Eppstein
Owner

After speaking with the sprockets guys it turns out to be ok to allow imported stylesheets to omit the .css part of the extension. rails/sass-rails@3babfd6

I think this will ease the transition for many people and avoid the strange failure scenarios.

Pavel Pravosud
rwz commented July 21, 2011

SPRITES Y NO WORK

Scott Davis
Collaborator

@rwz A+++++++++++ comment would read again. in fact i already read it 4 times!

Brian Jensen

This has become a very long thread..What is the current status?

Can I do compass init rails in my rails 3.1 project and I am good to go?

Mario Ricalde
Ken Collins

I am really trying to get things working again. Every post suggests that you can only use .sass files which I think sucks. Even Sass says the .sass is the deprecated syntax over the preferred .scss. I'll let y'all know what I come up with.

Chris Eppstein
Owner

rails applications default to scss unless you set config.sass.preferred_syntax = :sass

Ken Collins

OK, I finally got my setup working on 3.1.0.rc5. Hopefully this latest blog article is useful to some.

Use Compass Sass Framework Files With The Rails 3.1.0.rc5 Asset Pipeline
http://metaskills.net/2011/07/29/use-compass-sass-framework-files-with-the-rails-3.1.0.rc5-asset-pipeline/

Pavel Pravosud
rwz commented August 03, 2011

@metaskills, still not working in production. works well in development though.

Ken Collins

I suspect your are supposed to pre-compile for production. Did you notice to how the :assets gem group is even excluded from the production env? I suspect that further enforces my hunch too. FYI, I have precompiled with success but not yet deployed my 3.1 app to production.

Nate Bird

@metaskills Thanks for the article. It helped me through a couple hurdles. There is a lot to document and explain about how the asset pipeline works - especially with css frameworks like Compass. I hope to compile my notes into a blog post here soon too.

Brent Kirby

Ruby on Rails Guides: Asset Pipeline Maybe that helps some people?

I'm not sure you could place compass in your :assets group, since I'd imagine the gem needs to be installed for sass-rais/sprockets etc to find the assets/stylesheets during the precompile, maybe not? Either way you definitely need to precompile them in production. Sass/compass don't cause issues but we've had some problems with things trying to compress JS in production and taking forever to load (accidentally forgot to precompile one).

We've got 2-3 sites on 3.1 with compass and it works fine. Sprites are iffy but all of the css/frameworks/includes work no problem. Heres what I've been using

Gemfile:

gem 'compass', :git => "https://github.com/chriseppstein/compass.git", :branch => "rails31"

application.css.scss

//= require_self

@import 'compass/whatever/you/want/here';
// random css if you want
@import "./";  // or @import './application/ if you want to group files

I'm not sure if the initializer is necessary, I've never used one. I know trying to use sprockets directives to load files i.e.:

//= require compass/something

Doesn't really work, and I don't think it is supposed to since I believe compass adds itself to the sass load path, not sprockets/rails. Templates also use Tilt for processing and your final output is "css" hence the order of the extensions.

@bjensen You don't need to do compass init rails in 3.1
@rwz What part doesn't work in production?

Random thought typing that... maybe it could be useful to look into using Tilt in compass? I know adding dependencies sucks, but that could maybe be useful for pre-processing other things into stylesheets. Not sure how it effects standalone apps, but seems cool to be able to run css through erb or something first anywhere if you wanted to :)

Daniel Fischer

So what I'm trying to figure out is what is the proper way to include files into application.css?

I see a few people using require_tree and then a few other people not using require_tree and using glob imports @import "*";

I've noticed giant performance hits using the sass glob import. Anyone have feedback or comments on this?

I think people are getting confused on what "the right way is."

Brent Kirby

You can use require_tree or any of the sprockets helpers... but your going to need to include any "globals" in all of your files. Sprockets also won't find partials (that I know of).

For instance, say you have 3 files

application.css.scss
_mixins.css.scss
something_else.css.scss

In application.css.scss if you do

//= require_self
//= require_tree.

@import 'mixins';

When something_else is compiled, if you use any mixins from _mixins.css.scss, they won't be found. You'll have to do @import 'mixins'; in every file. When the files are merged/combined with sprockets, it doesn't carry over variables, includes, etc.

Think of it like this maybe? Sprockets/Tilt adds the ability to code your css using scss syntax, nesting stuff, using any of the built-in functions/methods etc, but it doesn't manage / carry over sass dependencies such as variables, mixing etc. Its like writing a ruby module to use in your rails app, and only doing require "my module" in environment.rb. You still have to mix them into any class where you want to use them (and perhaps require ;) ).

This may have changed recently, but as far as I know thats still the case for now.

So "the right way" depends on if you need those global includes/variables/mixins in every file or not :)

Samuel Cochran
sj26 commented August 04, 2011

It's important to know the difference between sprockets and sass.

Sprockets is a pre-processor. It essentially stitches your css files together. It does this AFTER filtering them through sass, so anything shared between sass files has to be imported by sass so it's available at filter time.

Christian Trosclair
xn commented August 25, 2011

Seems like things have shifted again. I updated my asset related gems in my bundle and am now having problems with my sprites.

They were returning:
url("/assets/ui-sad67d660bc.png")

Now they are returning:
url("/app/assets/images/ui-sad67d660bc.png")

Selected current bundle:
compass (0.12.0.alpha.0.f23bf58 f23bf58)
rails (3.1.0.rc6)
sass (3.1.5)
sass-rails (3.1.0.rc.6)
sprockets (2.0.0.beta.14 e13d1e8)

Any Ideas of what could be going wrong?

Pavel Pravosud
rwz commented August 25, 2011

@xn It's this bug: #500

Here's the ugly way to fix it for now:
in your application.rb after require 'rails/all' add this:
```require 'compass'
require 'sass-rails'


And don't forget to remove this shit after the bug is fixed
Christian Trosclair
xn commented August 25, 2011

Sadly, I already have that and it doesn't work. I've also checked bug #519.

Chris Eppstein
Owner

just pushed a bunch of changesets to the rails31 branch. It should make sprites work and clear up the extra /app/assets/ in asset urls. i'm hoping to release a v0.12 beta release very soon with proper rails 3.1 support, please let me know what further issues you are facing so I can address them asap.

Christian Trosclair
xn commented August 29, 2011

Awesome. I'll be testing that today. Thanks!

Pedro Nascimento
Scott Tesoriere

So far so good Chris, thanks!

Pavel Pravosud
rwz commented August 29, 2011

Having error after this update. The error only happens on production server (can not reproduce in production env on my dev machine) during css compilation.

undefined method `static_root' for #<Sprockets::Index:0xca35a00>
(in /myapp/releases/20110830042826/app/assets/stylesheets/main.css.sass)
/myapp/shared/bundle/ruby/1.9.1/bundler/gems/compass-22e2458b7751/lib/compass/app_integration/rails/actionpack31/railtie.rb:64:in `block in compass'
(eval):9:in `[]'
(eval):9:in `block in run_sprite_saved'
(eval):9:in `each'
(eval):9:in `run_sprite_saved'
/myapp/shared/bundle/ruby/1.9.1/bundler/gems/compass-22e2458b7751/lib/compass/configuration/inheritance.rb:69:in `run_sprite_saved'
/myapp/shared/bundle/ruby/1.9.1/bundler/gems/compass-22e2458b7751/lib/compass/sass_extensions/sprites/sprite_methods.rb:92:in `save!'
/myapp/shared/bundle/ruby/1.9.1/bundler/gems/compass-22e2458b7751/lib/compass/sass_extensions/sprites/sprite_methods.rb:57:in `generate'
/myapp/shared/bundle/ruby/1.9.1/bundler/gems/compass-22e2458b7751/lib/compass/sass_extensions/functions/sprites.rb:98:in `sprite_url'
/myapp/shared/bundle/ruby/1.9.1/bundler/gems/compass-22e2458b7751/lib/compass/sass_extensions/sprites/sprite_map.rb:65:in `method_missing'
/myapp/shared/bundle/ruby/1.9.1/bundler/gems/compass-22e2458b7751/lib/compass/sass_extensions/sprites/sprite_map.rb:56:in `to_s'
sass (3.1.7) lib/sass/script/list.rb:44:in `block in to_s'
sass (3.1.7) lib/sass/script/list.rb:44:in `map'
sass (3.1.7) lib/sass/script/list.rb:44:in `to_s'
sass (3.1.7) lib/sass/tree/visitors/perform.rb:216:in `visit_prop'
sass (3.1.7) lib/sass/tree/visitors/base.rb:37:in `visit'
sass (3.1.7) lib/sass/tree/visitors/perform.rb:18:in `visit'
sass (3.1.7) lib/sass/tree/visitors/base.rb:53:in `block in visit_children'
sass (3.1.7) lib/sass/tree/visitors/base.rb:53:in `map'
sass (3.1.7) lib/sass/tree/visitors/base.rb:53:in `visit_children'
sass (3.1.7) lib/sass/tree/visitors/perform.rb:27:in `block in visit_children'
sass (3.1.7) lib/sass/tree/visitors/perform.rb:39:in `with_environment'
sass (3.1.7) lib/sass/tree/visitors/perform.rb:26:in `visit_children'
sass (3.1.7) lib/sass/tree/visitors/base.rb:37:in `block in visit'
sass (3.1.7) lib/sass/tree/visitors/perform.rb:235:in `visit_rule'
sass (3.1.7) lib/sass/tree/visitors/base.rb:37:in `visit'
sass (3.1.7) lib/sass/tree/visitors/perform.rb:18:in `visit'
sass (3.1.7) lib/sass/tree/visitors/perform.rb:145:in `block in visit_import'
sass (3.1.7) lib/sass/tree/visitors/perform.rb:145:in `map'
sass (3.1.7) lib/sass/tree/visitors/perform.rb:145:in `visit_import'
sass (3.1.7) lib/sass/tree/visitors/base.rb:37:in `visit'
sass (3.1.7) lib/sass/tree/visitors/perform.rb:18:in `visit'
sass (3.1.7) lib/sass/tree/visitors/perform.rb:145:in `block in visit_import'
sass (3.1.7) lib/sass/tree/visitors/perform.rb:145:in `map'
sass (3.1.7) lib/sass/tree/visitors/perform.rb:145:in `visit_import'
sass (3.1.7) lib/sass/tree/visitors/base.rb:37:in `visit'
sass (3.1.7) lib/sass/tree/visitors/perform.rb:18:in `visit'
sass (3.1.7) lib/sass/tree/visitors/base.rb:53:in `block in visit_children'
sass (3.1.7) lib/sass/tree/visitors/base.rb:53:in `map'
sass (3.1.7) lib/sass/tree/visitors/base.rb:53:in `visit_children'
sass (3.1.7) lib/sass/tree/visitors/perform.rb:27:in `block in visit_children'
sass (3.1.7) lib/sass/tree/visitors/perform.rb:39:in `with_environment'
sass (3.1.7) lib/sass/tree/visitors/perform.rb:26:in `visit_children'
sass (3.1.7) lib/sass/tree/visitors/base.rb:37:in `block in visit'
sass (3.1.7) lib/sass/tree/visitors/perform.rb:47:in `visit_root'
sass (3.1.7) lib/sass/tree/visitors/base.rb:37:in `visit'
sass (3.1.7) lib/sass/tree/visitors/perform.rb:18:in `visit'
sass (3.1.7) lib/sass/tree/visitors/perform.rb:7:in `visit'
sass (3.1.7) lib/sass/tree/root_node.rb:20:in `render'
sass (3.1.7) lib/sass/engine.rb:293:in `_render'
sass (3.1.7) lib/sass/engine.rb:240:in `render'

Using rails 3.1.0.rc8, sprockets 2.0.0, Gemfile:

group :assets do
  gem 'sass-rails',   '~> 3.1.0.rc'
  gem 'coffee-rails', '~> 3.1.0.rc'
  gem 'uglifier'
  gem 'compass', :git => 'git://github.com/chriseppstein/compass.git', :branch => 'rails31'
end

application.rb:

require 'rails/all'

# tmpfix
# see: https://github.com/chriseppstein/compass/issues/500

require 'compass'
require 'sass-rails'
Chris Eppstein
Owner

What versions of rails, sprockets, sass, sass-rails, and compass do you have and can you make sure this is reproducible when they are all at the very latest version?

Pavel Pravosud
rwz commented August 29, 2011

Latest versions of everything. Tried sass-rails with '~> 3.1.0.rc' and with :git => 'git://github.com/rails/sass-rails.git', :branch => '3-1-stable'`

Like i said, i can't even reproduce it on my dev-machine. It only happens on production server.

Here is the Gemfile.lock: https://gist.github.com/52b657617a05ba632f88

Chris Eppstein
Owner

Ok everyone. I have shipped compass 0.12.alpha.0 which has rails 3.1 support that I think should mostly work now. I am closing this most epic issue and we'll address any further problems in more specific new bugs. Thank you for your patience. Sorry it took so long.

Going forward install the prereleases or use the master branch.

Chris Eppstein chriseppstein closed this August 30, 2011
Robert DeRose

How do you init a rails 3.1 using the 0.12.ahpa.0, particularly with trying to use the susy plugin

Scott Davis
Collaborator
Robert DeRose

any idea where, because all the gist I found are dealing with setting up the gem file and compass.rb file, but nothing about using compass init rails, let alone how to setup using a compass plugin like susy

Chris Eppstein

it doesn't mention compass init rails because rails has it's own generators which you should use now.

susy install is the same the same basic premise, require susy, install files. except you probably need to bundle exec:

$ vim Gemfile
    gem "compass-susy-plugin", :require => "susy"
$ bundle exec compass install susy

I'll update the gist with some more details. This gist will become official docs soon.

Robert DeRose

Thank you very much Chris for the awesome work and pointing out the proper gist to follow.

Frank Pimenta

hey Guys,

I have a question: I google it for a while and i could not find a solution for my case.

I want the generator (scaffold) to create the assets/stylesheets/sass and assets/stylesheets/javacripts directories for sass and coffee files instead of default ones (without the last directory).

Where could I change that?

Thanks in advance.

bUg.

Create a gem with custom generators. GL.

Srikanth Agaram
bundle exec compass init rails

still creates an app/stylesheets directory. I've installed compass from github master (version 0.12.alpha.3.39db29c).

How can I ensure that it uses the assets folders?

Scott Davis
Collaborator

you don't need to run init rails in rails 3.1 just add compass to your gemfile and your finished. on that note the new rails 3.1 generators will be in compass-rails gem once its released =)

rubytastic

Having this same issue with rails 3.2.2

Sass::SyntaxError: File to import not found or unreadable: blueprint/reset.

group :assets do
gem 'sass-rails', " ~> 3.2.4"
gem 'coffee-rails', "~> 3.2.2"
gem 'uglifier', '>= 1.0.3'
gem 'compass', git: 'git://github.com/chriseppstein/compass', branch: 'master'
# include other compass plugins here.
end

Updated gem file to latest would that be correct like above?

Chris Eppstein
Owner

@rubytastic Please file any new issues against the compass-rails gem. Please ensure you have followed the upgrade instructions on the README.

rubytastic

Thx @chriseppstein, my bad seems I never correctly upgraded and it only now breaks on 3.2.2 in case anyone else might have this issue just follow the upgrading instructions works, specific using the compass-rails gem instead of compass gem!

Kristijan

@rubytastic true, thx.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.