title: global var update from scss function
body: <p>I have a scss function</p>
  
  <pre class="lang-scss prettyprint-override"><code>@function darken($color,$percent) {
    ...
    @return $calculated-color;
  }
  </code></pre>
  
  <p>This function overrides the darken() function, but adds some extra features.
  Now, I wonder if it is possible to somehow store all calls to this function in some map and then after all function calls has been made run that map trough a mixin such as:</p>
  
  <pre class="lang-scss prettyprint-override"><code>$calc-colors:() !global;
  $calc-colors:map-merge(('thisvaluewillbeexported':1),$calc-colors);
  
  @function test($color,$percent) {
    $col: darken($color,$percent);
    // $calc-colors: append($calc-colors,'--'$color);           --not working
    // $calc-colors:map-merge(('--'+$color:$col),$calc-colors);   --not working
    @return $col;
  }
  
  .test {
    color:test(pink,24%);
  }
  
  .test2 {
    color:test(red,24%);
  }
  
  :export{
    @each $bp, $value in $calc-colors {
      #{$bp}: #{$value};
    }
  }
  //gives only thisvaluewillbeexported:1
  </code></pre>
  
  <p>My goal would to somehow get all calls to my test function recorded into the :export{} attribute in order to be able to fetch the values from javascript.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// My preferred output would be:
  
  {
  'thisvaluewillbeexported':1,
  '--pink':'#ff4666',
  '--red':'#850000'
  }</code></pre>
  </div>
  </div>
  </p>