title: How to set value to SCSS variables from HTML?
body: <p>I have gone through this link and it doesn't answer my questions.
  <a href="https://stackoverflow.com/questions/43332533/passing-values-from-html-to-scss">Passing values from HTML to SCSS</a> </p>
  
  <p>I am building a web application wherein an admin can go and set custom properties such as 
  1) changing global font size
  2) changing the panel background colors
  3) changing button color
  4) changing button dimensions etc.
  I have looked at PrimeNg designer API and I see that they have a list of about 500 variables in their scss file.
  What I would like to do is create a form so that user can set the values on the UI.
  Scenario 1--> 
  Example --></p>
  
  <pre><code> &lt;p-fieldset legend="Global Font Size"&gt;
                  &lt;input type="text" pInputText placeholder="Enter the global font size"&gt;
              &lt;/p-fieldset&gt;
  </code></pre>
  
  <p>once the user enters a value here, I want the value of the following variable that's contained inside of scss file to be updated with what the user entered above. </p>
  
  <pre><code>$fontSize:14px;
  </code></pre>
  
  <p>Scenario 2 -->
  Example --></p>
  
  <pre><code> &lt;p-fieldset legend="Global Font Size"&gt;
                  &lt;input type="text" pInputText placeholder="Enter the global font size"&gt;
  &lt;button (onClick)="saveGlobalFontSize(fontSize)"&gt; OK &lt;/button&gt;
              &lt;/p-fieldset&gt;
  </code></pre>
  
  <p>1) How can I accept a value on the UI and update the value of scss variable as asked in scenario 1?</p>
  
  <p>2) How can I accept a value on the UI, pass it to a typescript function and then update the value of scss variable as asked in scenario 2?</p>
  
  <p>Here is the documentation that I am referring -->
  <a href="https://www.primefaces.org/designer-ng/#/documentation" rel="nofollow noreferrer">https://www.primefaces.org/designer-ng/#/documentation</a> </p>