title: Angular: How dynamcally change scss variables?
body: <p>Im new to scss so I was waondering if I can change scss variables using the Typescript of a component for example. </p>
  
  <p>So consider this: </p>
  
  <pre><code>html: 
  &lt;div (someEvent)="handleEvent($event)"&gt;&lt;/div&gt;
  
  scss: 
  $thememode: 'theme1'; 
  $textcolormode: 'nonHover'; 
  $colorOpacity: 0.1; 
  @mixin someFunction(param1, param2){
      //do scss magic
  }
  
  ts: //Here is what I want to do, but dont know to code:
  handleEvent(event):void{
     this.scssFile.$thememode = 'theme2'; 
     this.scssFile.$colormode = 'hover'; 
     this.scssFile.$colorOpacity = this.someattribute + this.someServive.$generateAnotherValue(someParam); 
     this.scssFile.@someFunction(23, 'mode1'); 
  }
  </code></pre>
  
  <p>Basically I just want to be able to access the scss variables/mixins I define. </p>
  
  <p>Is there a way to do that? </p>