title: Passing values from HTML to SCSS
body: <p>I am new to SCSS and not really sure how to use it. I have looked around on SO and other places to find a solution but couldn't.</p>
  
  <p>I am developing an app that displays a list of phones. I get this list (in the form of JSON) by calling a REST API. All the phones has same type of information to be displayed, like Name, Model, Price, Available, Quantity.</p>
  
  <p><strong>Please note that my question is not similar to <a href="https://stackoverflow.com/questions/13501726/access-html-attribute-value-in-sass">Access HTML attribute value in SASS</a></strong>. This link talks about calculating number of children of a parent element. And in my case, I want to get stylesheet code (color, font-size, font-width) depending on the value of one of the property of my JSON object.</p>
  
  <p>What I am trying to do is:</p>
  
  <ul>
  <li>Display these phones in their own DIV/Card with individual colors <strong>depending on the type of the phone</strong>. The "Phone Type" is an integer value.</li>
  <li>Display Name, Price, Available and Quantity in different font sizes.</li>
  </ul>
  
  <p>I have read about <strong>@mixin</strong> in SCSS and that they can accept <strong>parameters</strong>. I guess I can use this to pass in my <strong>phone type</strong> integer/number value.</p>
  
  <p>All the examples I have seen are calling <strong>@mixin</strong> from a another SCSS file by passing in the parameter value. </p>
  
  <p>Is this the only way to pass in parameter value(s) to a <strong>@mixin</strong>?</p>
  
  <p>It would be great if somebody can please tell me if there is a way to pass parameter value (the <strong>phone type</strong> in my case) from <strong>HTML</strong> to <strong>SCSS</strong> <strong>@mixin</strong>.</p>
  
  <p>Any help is highly appreciated.</p>
  
  <p>Thank you.</p>