Compass: Why do I need to do a double import for it to work?

Question

Using Rails 3.2, compass-rails.

I have the following files:

screen.css.scss

@import "compass";

application.css.scss

/*
 *= require_self
 *= require_tree .
*/

@import "screen";

.content {
  background-color: #eee;
  padding: 20px;
  margin: 0 -20px; 
  @include border-radius(6px, 6px);
  @include box-shadow(0,0,0,.15);
}

application.html.erb (layout, just the relevant line):

<%= stylesheet_link_tag "application", :media => "all" %>

This works fine for my app layout.

Next, for the specific page I'm trying to style (home) I have home.css.scss:

@import url(http://fonts.googleapis.com/css?family=Oleo+Script+Swash+Caps:700);

@import "compass/css3/text-shadow"; <<-- This is the line I don't understand

.welcome {
  text-align: center;
  h1 {
    font-family: 'Oleo Script Swash Caps', cursive;
    font-weight: 700;
    font-size: 110pt;
    line-height: 130px;
    @include single-text-shadow;
  }
 }

As soon as I drop @import "compass/css3/text-shadow";, my code breaks with Undefined mixin 'single-text-shadow'. The same thing happens if I move the text-shadow import line into application.css.css.

My question is why? I've included the entire compass framework in application.css.css via screen.css.scss. That file is loaded for sure because I see it working. So why do I need to do a double-include like this?

Answer 1

Unless home.css.scss is importing application.css.scss, this makes sense as expected behavior. You only need to import it once per compiled document, it will be available to any partials that are included in that document (and come after the import in your code).

It's common to import Compass once into a _base.scss partial (along with any other plugins you want available), and then import that partial anywhere you need your base settings.