title: @import with Sass not combining files
body: <p>I'm new to sass and I'm trying to import a parent theme's css in a Magento application.</p>
  
  <p>I have it working to an extent but not with the result I was expecting.</p>
  
  <p>In my <strong>styles.scss</strong> folder I have:</p>
  
  <pre><code>@import "../../../rwd/default/css/styles.css";
  </code></pre>
  
  <p>I have run the <code>sass --watch styles.scss:styles.css</code> in the terminal and the resulting <strong>styles.css</strong> file has:</p>
  
  <pre><code>@import url(../../../rwd/default/css/styles.css);
  </code></pre>
  
  <p>In the <a href="http://sass-lang.com/guide" rel="noreferrer">sass guide</a> it says:</p>
  
  <blockquote>
    <p>CSS has an import option that lets you split your CSS into smaller,
    more maintainable portions. The only drawback is that each time you
    use @import in CSS it creates another HTTP request. Sass builds on top
    of the current CSS @import but instead of requiring an HTTP request,
    Sass will take the file that you want to import and combine it with
    the file you're importing into so you can serve a single CSS file to
    the web browser.</p>
  </blockquote>
  
  <p>So I was expecting SASS to import the css as plain old css rules rather than using the @import rule, so my styles.css would look something like:</p>
  
  <pre><code>/* ==========================================================================
     HTML5 display definitions
     ========================================================================== */
  /*
   * Corrects `block` display not defined in IE 8/9.
   */
  article,
  aside,
  details,
  figcaption,
  figure,
  footer,
  header,
  hgroup,
  nav,
  section,
  summary {
    display: block;
  }
  
  /*
   * Corrects `inline-block` display not defined in IE 8/9.
   */
  audio,
  canvas,
  video {
    display: inline-block;
  }
  
  /*
   * Prevents modern browsers from displaying `audio` without controls.
   * Remove excess height in iOS 5 devices.
   */
  audio:not([controls]) {
    display: none;
    height: 0;
  }
  
  /*
   * Addresses styling for `hidden` attribute not present in IE 8/9.
   */
  [hidden] {
    display: none;
  }
  
  /* ==========================================================================
     Base
     ========================================================================== */
  /*
   * 1. Sets default font family to sans-serif.
   * 2. Prevents iOS text size adjust after orientation change, without disabling
   *    user zoom.
   */
  html {
    font-family: sans-serif;
    /* 1 */
    -webkit-text-size-adjust: 100%;
    /* 2 */
    -ms-text-size-adjust: 100%;
    /* 2 */
  }
  
  /*
   * Removes default margin.
   */
  body {
    margin: 0;
  }
  
  /* ==========================================================================
     Links
     ========================================================================== */
  /*
   * Addresses `outline` inconsistency between Chrome and other browsers.
   */
  a:focus {
    outline: thin dotted;
  }
  
  /*
   * Improves readability when focused and also mouse hovered in all browsers.
   */
  a:active,
  a:hover {
    outline: 0;
  }
  
  /* ==========================================================================
     Typography
     ========================================================================== */
  /*
   * Addresses `h1` font sizes within `section` and `article` in Firefox 4+,
   * Safari 5, and Chrome.
   */
  h1 {
    font-size: 2em;
  }
  
  /*
   * Addresses styling not present in IE 8/9, Safari 5, and Chrome.
   */
  abbr[title] {
    border-bottom: 1px dotted;
  }
  
  /*
   * Addresses style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
   */
  b,
  strong {
    font-weight: bold;
  }
  
  /*
   * Addresses styling not present in Safari 5 and Chrome.
   */
  dfn {
    font-style: italic;
  }
  
  /*
   * Addresses styling not present in IE 8/9.
   */
  mark {
    background: #ff0;
    color: #000;
  }
  
  /*
   * Corrects font family set oddly in Safari 5 and Chrome.
   */
  code,
  kbd,
  pre,
  samp {
    font-family: monospace, serif;
    font-size: 1em;
  }
  
  /*
   * Improves readability of pre-formatted text in all browsers.
   */
  pre {
    white-space: pre;
    white-space: pre-wrap;
    word-wrap: break-word;
  }
  
  /*
   * Sets consistent quote types.
   */
  q {
    quotes: "\201C" "\201D" "\2018" "\2019";
  }
  
  /*
   * Addresses inconsistent and variable font size in all browsers.
   */
  small {
    font-size: 80%;
  }
  
  /*
   * Prevents `sub` and `sup` affecting `line-height` in all browsers.
   */
  sub,
  sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  </code></pre>
  
  <p>That way I would have a styles.css on production which didn't use the @import rule.</p>