title: Why do I need to @import my SCSS files more than once to prevent errors?
body: <p>I'm using some third party styles that is provided in SCSS format. I'm customizing it a good deal, so I'm using the SCSS as opposed to importing the CSS into my SCSS files.</p>
  
  <p>Here is the architecture of my SCSS files. </p>
  
  <pre><code>&gt; scss (folder)
  &gt; --third-party-code (folder)
  &gt; ----extras (folder)
  &gt; ------jquery.plugin.header.scss
  &gt; ------jquery.plugin.footer.scss
  &gt; ----third-party-code-main.scss (includes imports)
  &gt; --modules (folder)
  &gt; ----_header.scss
  &gt; ----_footer.scss
  &gt; ----_navigation.scss
  &gt; --_third-party-code.scss
  &gt; --_modules.scss (includes imports)
  &gt; --styles.scss (includes imports)
  </code></pre>
  
  <p>Can someone tell me why I keep getting these "mixin", "variable" or "sprite" not defined if I don't @import the SCSS files where I define my variables, mixins and sprites?</p>
  
  <p>Doing this is causing two of the same sprite images to appear in my CSS which is breaking my images that use sprites on the page.</p>
  
  <p>Why are the third party SCSS files being treated differently than SCSS files that I include in my "scss/modules" directory?</p>
  
  <p>Let me know if I need to include any additional information.</p>