title: How to import scss variable depends on included mixin
body: <p>i have the following structure in my angular project:</p>
  
  <pre><code>- modules
   -- foo-module
     -- foo-comp
  - assets
   -- fonts
     -- Open_Sans
        ....
  - scss
   -- partials
     -- _fontface.scss
     -- _variables.scss
   styles.scss
  </code></pre>
  
  <p><strong>styles.scss:</strong></p>
  
  <pre><code>@import "./partials/variables";
  
  * {
    margin:  0;
    padding: 0;
  }
  
  body{
      background-color: $color;
      font-family: $font-face;
  }
  </code></pre>
  
  <p><strong>_variables.scss:</strong></p>
  
  <pre><code>@import "./fontface";
  
  @include font-face(OpenSans, "../fonts/Open_Sans/OpenSans-Regular", 500, normal, ttf);
  
  $font-face: OpenSans, sans-serif;
  $color: yellow;
  </code></pre>
  
  <p><strong>_fontface.scss:</strong></p>
  
  <pre><code>    // =============================================================================
  // String Replace
  // =============================================================================
  
  @function str-replace($string, $search, $replace: "") {
      $index: str-index($string, $search);
  
      @if $index {
          @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
      }
  
      @return $string;
  }
  
  // =============================================================================
  // Font Face
  // =============================================================================
  
  @mixin font-face($name, $path, $weight: null, $style: null, $exts: eot woff2 woff ttf svg) {
      $src: null;
  
      $extmods: (
          eot: "?",
          svg: "#" + str-replace($name, " ", "_")
      );
  
      $formats: (
          otf: "opentype",
          ttf: "truetype"
      );
  
      @each $ext in $exts {
          $extmod: if(map-has-key($extmods, $ext), $ext + map-get($extmods, $ext), $ext);
          $format: if(map-has-key($formats, $ext), map-get($formats, $ext), $ext);
          $src: append($src, url(quote($path + "." + $extmod)) format(quote($format)), comma);
      }
  
      @font-face {
          font-family: quote($name);
          font-style: $style;
          font-weight: $weight;
          src: $src;
      }
  }
  </code></pre>
  
  <p><strong>comp.scss:</strong></p>
  
  <p>@import '...../variables';</p>
  
  <p>And now i want to use <strong>_variables.scss</strong> as import in my <strong>comp.scss</strong>. So it doesnt look as possible, because <code>@include font-face(OpenSans, "../fonts/Open_Sans/OpenSans-Regular", 500, normal, ttf);</code> this mixin has an url doesnt depend on <strong>comp.scss</strong> url, so i have a corresponding error. And it looks good in style.scss (cause of <code>../</code> url)</p>
  
  <p>I need this global variable <strong>$font-face</strong> for the future usage of multiple fonts, and i want to store em in one place.</p>