Passing values from HTML to SCSS

Question

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.

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.

Please note that my question is not similar to Access HTML attribute value in SASS. 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.

What I am trying to do is:

• Display these phones in their own DIV/Card with individual colors depending on the type of the phone. The "Phone Type" is an integer value.
• Display Name, Price, Available and Quantity in different font sizes.

I have read about @mixin in SCSS and that they can accept parameters. I guess I can use this to pass in my phone type integer/number value.

All the examples I have seen are calling @mixin from a another SCSS file by passing in the parameter value.

Is this the only way to pass in parameter value(s) to a @mixin?

It would be great if somebody can please tell me if there is a way to pass parameter value (the phone type in my case) from HTML to SCSS @mixin.

Any help is highly appreciated.

Thank you.