Getting compass mix-ins to work with Rails

1
votes

I'm trying to get scss gradients to work from colorzilla's handy gradient editor. I get an error when adding that scss code to assets/stylesheets/header.css.scss:

Undefined mixin 'filter-gradient'. (in /Users/me/code/app/assets/stylesheets/header.css.scss)

So I add the @import "compass/css3/images"; to my header.css.scss file:

@import "compass/css3/images";

header address {
  background-color: #c9de96;
  @include filter-gradient(#c9de96, #398235, vertical);
  $experimental-support-for-svg: true;
  @include background-image(linear-gradient(top,  #c9de96 0%,#8ab66b 44%,#398235 100%));
}

Now I get this error:

File to import not found or unreadable: compass/css3/images. Load path: Sass::Rails::Importer(/Users/me/code/app/assets/stylesheets/header.css.scss) (in /Users/me/code/app/assets/stylesheets/header.css.scss)

I had to add compass-rails to my Gemfile:

group :assets do
  gem 'sass-rails'
  gem 'coffee-rails'
  gem 'compass-rails'
  gem 'uglifier'
end

How do I get these linear gradients to work with scss and rails?

2
ruby-on-railsruby-on-rails-3ruby-on-rails-3.2compass-sasssass

2 Answers

2
votes

So annoyed to have wasted time on this. I just needed to restart the web server!

0
votes

I am posting this answer just in case someone runs into a similar problem like I did using compass 0.12.2. In your .scss file include this:

@import "compass";