title: Is it possible to pass value to SCSS variable from Typescript in Angular2
body: <p>I am looking for the possible solution where I can pass value to <code>SCSS</code> variable. I am pretty much aware since <code>SCSS</code> is a pre-processor and it's nearly impossible. But there has to be some solution where we can easily access the variable and change or retrieve it's value. </p>
  
  <p>Can't we put <code>watch</code> using <code>grunt</code> or <code>gulp</code> to constantly check for possible changes in <code>SCSS</code> file and based on that we get appropriate css? (I am aware that to retrieve those changes we need to refresh the page.) Is it really possible? </p>
  
  <p><strong>EDIT</strong></p>
  
  <p>Let say I have one SCSS file: <code>style.scss</code></p>
  
  <pre><code>$background : #c9def5;
  
  
  .nav-tabs {
      background-color: $background;
  }
  </code></pre>
  
  <p>Initially when css is generated it looks like this </p>
  
  <pre><code>.nav-tabs {
          background-color: #c9def5;
      }
  </code></pre>
  
  <p>Now In my application there is facility of changing theme of the application dynamically. So for that I need to pass color value to <code>$background</code> in <code>SCSS</code> file and need to change it. 
  Now say I have changed Theme color to something like <code>#d9d9d9</code></p>
  
  <p>So all I want is to pass value <code>#d9d9d9</code> to <code>$background</code> and that modifies the css </p>
  
  <pre><code>  .nav-tabs {
          background-color: #c9def5;
      }
  </code></pre>
  
  <p>Is it really possible? If yes then how can I achieve it?</p>
  
  <p>PS: I have seen many such questions available on SO but didn't got any satisfactory answer there.</p>