How to use custom component variable in custom component stylesheet?

Ionic Framework ionic-v3
1

Let’s say I have a custom component - WoodComponent (/src/components/wood/wood.ts):

import { Component } from '@angular/core';
@Component({
  selector: 'wood',
  templateUrl: 'wood.html'
})
export class WoodComponent {
  color: string = 'brown';
  constructor() {}
}

How would I use the color variable in the component’s stylesheet (/src/components/wood/wood.scss)? E.g.:

wood {
  .wood-selected {
    background-color: color($colors, [color variable from component]);
  }
}

Thanks!

2

I would be surprised to learn that this is possible directly as designed. I think the best you will be able to do is trampoline via the template, with something like:

<div [style.background-color]="color">

…which would pick up whatever the color property in the controller is set to.