Note that there are some explanatory texts on larger screens.

plurals
  1. POCompass: Why do I need to do a double import for it to work?
    primarykey
    data
    text
    <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>&lt;%= stylesheet_link_tag "application", :media =&gt; "all" %&gt; </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"; &lt;&lt;-- 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>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

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