title: SASS Source Map pointing to the wrong SASS file
body: <p>I have 4 SASS files <code>main.sass</code>, <code>_fonts.sass</code>, <code>_variables.sass</code>, <code>_home.sass</code>.</p>
  
  <p>main.sass</p>
  
  <pre><code>@import 'fonts'
  @import 'variables'
  @import 'home'
  </code></pre>
  
  <p>_fonts.sass</p>
  
  <pre><code>@font-face
      font-family: "FontAwesome"
      font-weight: normal
      font-style: normal
      src: url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.eot?v=4.3.0")
      src: url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.eot?#iefix&amp;v=4.3.0") format("embedded-opentype"), url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff2?v=4.3.0") format("woff2"), url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff?v=4.3.0") format("woff"), url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.ttf?v=4.3.0") format("truetype"), url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular") format("svg")
  </code></pre>
  
  <p>_variables.sass</p>
  
  <pre><code>$yellow: #fce001
  </code></pre>
  
  <p>_home.sass</p>
  
  <pre><code>.container
      color: $yellow
      text-align: right
  
  .another-container
      color: $yellow
      text-align: center
  
      &amp;:after
          content: '\f0b0'
          font-family: FontAwesome
          font-style: normal
          font-weight: normal
          text-decoration: inherit
          position: absolute
          right: 20px
          display: inline-block
          font-size: 1.1em
  </code></pre>
  
  <p>Here's my sample HTML</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;title&gt;hello&lt;/title&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;link rel="stylesheet" type="text/css" media="screen" href="style.css" /&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="container"&gt;
          container
      &lt;/div&gt;
      &lt;div class="another-container"&gt;
          another-container
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I'm compiling my SASS file using this command: <code>sass --watch main.sass:style.css</code></p>
  
  <p>When I check my google chrome inspect element to <code>container</code> or <code>another-container</code>, its pointing to <code>_variables.sass</code> NOT <code>_home.sass</code>. <code>_variables.sass</code> only contain variables. I want it to point to <code>_home.sass</code>.</p>
  
  <p>@update
  I managed to pinpoint what is causing the error, in the <code>_home.sass</code> in <code>content: '\f0b0'</code>, if I remove this the source map is pointing to the correct line, why is this causing the error?</p>