Passing values from HTML to SCSS

Ionic Framework ionic-v3
1

I am new to SCSS. I have looked around in many 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 array) by calling a REST API. All the phones has same type of information to be displayed, like Name, Model, Price, Available, Quantity.

What I am trying to do is:

  • Display these phones in their own 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. That is, Name of phone in all cards will be displayed in a similar way. Same for Price, Availability and Quantity.

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. So I am a bit confused.

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.

2

The way I would do this is to define a CSS class for each phone type, and use that to define the colors in the style sheets. Then you can do something like this in the template:

<ng-template ngFor let-phone [ngForOf]="phones">
<ion-card [ngClass]="'phone-type-' + phone.type"></ion-card>
</ng-template>
3

Awesome! Thanks for the quick reply @rapropos! Very much appreciated!

Sorry, I did not mention I am using Ionic 2.

I think I should be able to achieve it as below with Ionic 2:

<ion-card *ngFor="let phone of phones" [ngClass]="'phone-type' + phone.type">
    <ion-item [ngClass]="'phone-heading' + phone.type">
    .
    .
    .
    </ion-item>
</ion-card>

Thanks again!

4

Maybe. I’ve had various head-scratching bugs using that *ngFor syntax, which is why I tend to write it out longhand using <ng-template> as above (<template> for Angular 2, which has been deprecated in favor of <ng-template> in Angular 4).

5

Oh it has bugs. :frowning:
I have used it in quite a few places in the app. I am still comparatively new to Ionic 2 and maybe therefore haven’t faced any yet. Will try it in your way.

Thanks!