title: How to @extend from another sass file, or how to achieve OOSASS?
body: <p>My question is actually broader than the title says. This is just where I am running into a snag with my idea, but I am open to all sorts of solutions. Let me explain my overall goal.</p>
  
  <p>I like what CSS preprocessors can do. I like the ideas of OOCSS and SMACSS. I am new to all of this. I am trying to upgrade my design methods to somehow incorporate the best of all worlds. I have a theoretical method that works like this:</p>
  
  <ul>
  <li>use only semantic class names or id's or whatever</li>
  <li>define modules or patterns in some common style sheet</li>
  <li>have per page stylesheets that @extend modules from the common stylesheet onto the semantic selectors pertaining to a given page</li>
  </ul>
  
  <p>So this:</p>
  
  <pre><code>/* modules.scss */
  .ruddy {color: red}
  .fullwidth {width: 100%; display: block;}
  </code></pre>
  
  <p>plus this:</p>
  
  <pre><code>/* homepage.scss */
  @import modules.sass
  
  #intro {@extend ruddy; @extend fullwidth}
  aside {@extend ruddy;}
  .thing {@extend fullwidth;}
  </code></pre>
  
  <p>becomes this:</p>
  
  <pre><code>/* homepage.css */
  #intro, aside {color: red}
  #intro, .thing {width: 100%; display: block;}
  </code></pre>
  
  <p>I haven't necessarily seen anybody else do this but it seemed like a good idea to me. The problem I am running into in my grand scheme is that @extend doesn't seem to work from an imported file. Someone somewhere else on SO said that  it is not possible. Is this true? I got mixins to work but problem with them is that they duplicate every attribute in the output css, which doesn't seem ideal.</p>
  
  <p>I'm actually more partial to LESS (syntax), but that doesn't even have extending at the moment. Should I not worry about the inefficiencies of mixins or is there some way to achieve what I'm asking for?</p>
  
  <p><strong>Note:</strong>
  I am auto-compiling my sass with a tool called Prepros. When I try to compile code such as the above I get an error like.</p>
  
  <blockquote>
    <p>WARNING on line 11 of ... \sass\home.scss: "#intro" failed to  @extend "ruddy".
      The selector "ruddy" was not found.</p>
  </blockquote>
  
  <p>If I just copy the code from module.scss into homepage.scss then the problem goes away.</p>