title: How to modify SaSS variable value before running CSS Gulp task
body: <p>I have a list of json files, each containing a few key-value pairs that indicate colors, text size and other such information. I also have a set of <code>scss</code> files, including a <code>variables.scss</code> file with default values for those very variables (color, text size etc.). 
  How can I obtain a Gulp task to generate as many <code>css</code> files as there are json files, after replacing the default variables' values with those indicated in the json files?</p>
  
  <p><code>JSON</code> file example:</p>
  
  <pre><code>{
      "css": {
          "color": "#337019",
          "textSize": "15px"
      }
  
  }
  </code></pre>
  
  <p>Base <code>variables.scss</code> file content:</p>
  
  <pre><code>$themeColor: #356AA0;
  $fontSize: 13px;
  </code></pre>
  
  <p>In the example above, the value of <em>color</em> in the <code>json</code> file would substitute the value of the <code>$themeColor</code> variable from the <code>scss</code> file.</p>