title: How to update the global sass variable from a mixin
body: <blockquote>
    <p><strong>Note: Please Don't Mark it as duplicate, many like myself, are waiting for the answer. we've searched everywhere.</strong></p>
  </blockquote>
  
  <p>1) I have a global variable <strong>$global_var_bg</strong> defined as <strong>blue</strong> color in the scss file of a component.</p>
  
  <p>2) I have a <strong>mixin function</strong> in the component's scss file which accepts the $theme argument, which is passed while the global theme changes for the app.</p>
  
  <p>3) <strong>Inside</strong> the mixin function I <strong>change</strong> the global variable <strong>$global_var_bg</strong>.</p>
  
  <p>4) Then access the global variable <strong>$global_var_bg</strong> inside an scss <strong>class</strong>.</p>
  
  <p>5) finally I <strong>assign</strong> the <strong>class</strong> to a <strong>div</strong> element in the component.html, expecting <strong>$global_var_bg</strong> to be the modified <strong>background_color</strong> inside the mixin function.</p>
  
  <p>6) but, its still <strong>$global_var_bg</strong> </p>
  
  <blockquote>
    <p>Help me to solve this problem, </p>
    
    <p>Note: I don't want to move the class inside the mixin function.</p>
  </blockquote>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@import '~@angular/material/theming';
  
  
  $global_var_bg: blue; //define a global variable
  
  
  @mixin dashboard-component-theme($theme) {
  
    $background: map-get($theme, background);
  
    //modify the global variable inside the mixin function
  
    $global_var_bg: mat-color($background, background) !global;
  }
  
  //access the global variable inside a class
  .some-class {
    background-color: $global_var_bg;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!-- set the background color of the div --&gt;
  &lt;!-- which I expect to be the theme's backround color --&gt;
  &lt;!-- but still blue--&gt;
  
  &lt;div class="some-class"&gt; random text &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>