title: How to access scss variables in typescript
body: <p>I wanted to generate an object and it will create an HTML element. Here I need to supply color, background-color, border to that object.</p>
  
  <p>Instead of hard coding all those values, I wanted to grab them from SCSS.</p>
  
  <p>I tried this way and it works. Not sure it is the correct way to do or not. So, looking for perfect solution</p>
  
  <p>SCSS sample code:</p>
  
  <pre><code>:root {
      --normal-rate: #00008b;
      --special-rate : #80d4ff;
      --flat-rate : #F7941D;
  }
  </code></pre>
  
  <p>Typescript Code:</p>
  
  <pre><code>this.normalRate = window.getComputedStyle(document.documentElement).getPropertyValue("--normal-rate");
  this.specialRate = window.getComputedStyle(document.documentElement).getPropertyValue(RateColor.SpecialRate);
  this.flatRate = window.getComputedStyle(document.documentElement).getPropertyValue(RateColor.FlatRate);
  
  this.obj= [
          { title: '', allDay: false,..., backgroundColor: this.specialRate, borderColor: this.specialRate },
          { title: '', allDay: false,..., backgroundColor: this.normalRate, borderColor: this.normalRate },
          { title: '', allDay: false,..., backgroundColor: this.flatRate, borderColor: this.flatRate }
        ];
  </code></pre>