En mi archivo html, paso el valor para --is-item-status como: -

<ion-label class="textColor label-md black-shade-light" style="--is-item-status: {{item.status}}" >{{item.status | formatEnum | async}}</ion-label>

(Nota: esto se rellena dentro de *ngFor condition).

en el navegador puedo ver el valor que se completa como: -

En mi archivo scss tengo un código como: -

 .textColor { @if var(--is-item-status) == 'INVOICE_OPEN' { color: blue; } @else if var(--is-item-status) == ('PAYMENT_STATUS_CANCELLED' or 'INVOICE_CANCELLED' or 'ORDER_CANCELLED') { color: red; } @else if var(--is-item-status) == ('PAYMENT_STATUS_PARTLY_APPLIED' or 'INVOICE_PARTLY_PAID' or 'ORDER_CLOSED') { color: black; } @else if var(--is-item-status) == ('PAYMENT_STATUS_APPLIED' or 'INVOICE_PARTLY_PAID' or 'ORDER_INVOICED') { color: green; } @else { color: yellow; } }

Pero las condiciones si no se cumplen. ¿Alguien podría decirme qué estoy haciendo mal en esto?