Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Support for rails 3.1 conventions #337

Closed
chriseppstein opened this Issue · 208 comments
@chriseppstein
  • 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.

@sporkd

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?

@chriseppstein

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

@sporkd

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

@scottdavis
Owner

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

@scottdavis
Owner

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

@chriseppstein

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.

@sporkd

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.

@chriseppstein

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

@sporkd

Perfect. Good to know.

@tjeden

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.

@chriseppstein

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

@kieranklaassen

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.

@mlapshin

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.

@MarioRicalde

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

@kieranklaassen

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

@chriseppstein

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

@MarioRicalde

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.

@chriseppstein

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

@MarioRicalde

Roger! Thanks for your hard work <3

@MarioRicalde

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

@scottdavis
Owner

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

@chriseppstein

require_tree will be supported via glob-based imports:

@import "partials/**/*"
@lawrencecurtis

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'

@lawrencecurtis

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";

@lawrencecurtis

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 ?

@chriseppstein

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.

@lawrencecurtis

@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

@stouset

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

@chriseppstein

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.

@scottdavis
Owner

@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.

@stouset

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

@stouset

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.

@chriseppstein

stouset these are problems with rails, sass and sprockets.

@stouset

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.

@stouset

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.

@scottdavis
Owner

@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

@JeanMertz

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/

@chriseppstein

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.

@slbug

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

@ghost

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.

@stouset

@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.

@ghost

@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)

@stouset

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.

@scottdavis
Owner

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.

@stouset

@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.

@scottdavis
Owner

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

@stouset

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.

@ghost

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.

@scottdavis
Owner

@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

@ghost

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";

@JeanMertz

@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)
@scottdavis
Owner

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

@chriseppstein

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.

@scottdavis
Owner

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

@ghost

@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.

@JeanMertz

@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?

@brentkirby

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.

@MarioRicalde

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

@chriseppstein

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.

@MarioRicalde

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

@JeanMertz

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

@gaeldeest

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 ?

@SolidRhino

This is great news

@kieranklaassen

Awesome! Thank for the hard work!

@JeanMertz

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?

@dfischer

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

@felixandersen

@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™

@scottdavis
Owner

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

@jwallaceparker

@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.

@chriseppstein

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

@tehviking

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

@scottdavis
Owner
@masterkain

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!

@chriseppstein

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.

@masterkain

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.

@chriseppstein

@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.

@masterkain

@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.

@chriseppstein

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

@aantix

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

@masterkain

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

@bradphelan

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

@JeanMertz

@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.

@oriolgual

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

@bradphelan

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'
@bradphelan

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.

@bradphelan

No description provided.

@oriolgual

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

@bradphelan
@bradphelan

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 :)

@zerobearing2

@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.

@oriolgual

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

@SolidRhino

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)?

@chriseppstein

@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.

@JeanMertz

@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.

@ginty

@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.

@lunks
#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.

@brentkirby

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.

@marcandre

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

@scottdavis
Owner
@brentkirby

@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?

@scottdavis
Owner
@MarioRicalde

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

@manuelmeurer

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.

@brentkirby

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.

@chriseppstein

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

@brentkirby

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 :)

@chriseppstein

@brentkirby post gist I'm confused.

@brentkirby

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 :)

@brentkirby

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.

@chriseppstein

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

@RainerBlessing

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 ??

@bradphelan
@bicepjai
@bradphelan

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
@mfilej

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)
@masterkain

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

@manuelmeurer

@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.

@scottdavis
Owner

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

@manuelmeurer

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

@scottdavis
Owner
@mfilej

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

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

@jamesarosen

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.

@manuelmeurer

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

@derekprior

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

@chriseppstein

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

@import "**/*"
@derekprior

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).

@derekprior

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

@sj26

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.

@alec-c4

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?

@masterkain

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

@chriseppstein

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

@masterkain

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

@chriseppstein

working on it.

@JeanMertz

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)?

@ghost

@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.

@brentkirby

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

@JeanMertz

@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"
@rwz
rwz commented

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?

@rwz
rwz commented

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

It works this way.

@ginty
@mchung

@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"
@rwz
rwz commented

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

@rwz

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.

@sj26

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.

@sj26

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

@dfischer

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

@rwz

@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.

@sj26

@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.

@bsingr

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

@rwz

@dpree not gonna work in production

@bokmann

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?

@JeanMertz

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.

@bokmann

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.

@sj26

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

@bokmann

@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.

@HeshamAmiri

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.

@sj26

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.

@JeanMertz
@manuelmeurer

@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.

@pake007

@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.

@HeshamAmiri

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);
}

@HeshamAmiri

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

@dfischer

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

@chriseppstein

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.

@scottdavis
Owner

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

@bjensen

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?

@MarioRicalde
@metaskills

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.

@chriseppstein

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

@metaskills

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/

@rwz
rwz commented

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

@metaskills

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.

@natebird

@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.

@brentkirby

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 :)

@dfischer

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."

@brentkirby

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 :)

@sj26

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.

@xn
xn commented

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?

@rwz

@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
@xn
xn commented

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

@chriseppstein

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.

@xn
xn commented

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

@lunks
@scottkf

So far so good Chris, thanks!

@rwz

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'
@chriseppstein

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?

@rwz

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

@chriseppstein

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.

@RobertDeRose

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

@scottdavis
Owner
@RobertDeRose

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

@chriseppstein

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.

@RobertDeRose

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

@frankapimenta

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.

@slbug

Create a gem with custom generators. GL.

@aksrikanth
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?

@scottdavis
Owner

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?

@chriseppstein

@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!

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.