StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POCompass: Why do I need to do a double import for it to work?
text
Body
copied!<p>Using Rails 3.2, compass-rails.</p> <p>I have the following files:</p> <p><strong>screen.css.scss</strong></p> <pre><code>@import "compass"; </code></pre> <p><strong>application.css.scss</strong></p> <pre><code>/* *= 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); } </code></pre> <p><strong>application.html.erb</strong> (layout, just the relevant line):</p> <pre><code><%= stylesheet_link_tag "application", :media => "all" %> </code></pre> <p>This works fine for my app layout.</p> <p>Next, for the specific page I'm trying to style (home) I have <strong>home.css.scss</strong>:</p> <pre><code>@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; } } </code></pre> <p>As soon as I drop <code>@import "compass/css3/text-shadow";</code>, my code breaks with <code>Undefined mixin 'single-text-shadow'.</code> The same thing happens if I move the text-shadow import line into application.css.css.</p> <p>My question is <strong>why?</strong> 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?</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload