Wie wird die benutzerdefinierte Komponentenvariable im benutzerdefinierten Komponenten-Stylesheet verwendet?

Question

Lassen Sie uns sagen, dass ich eine benutzerdefinierte Komponente haben - WoodComponent (/src/components/wood/wood.ts):

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

Wie würde ich die Farbe Variable in der Sheet der Komponente verwenden (/ src/components/Holz/wood.scss)? Zum Beispiel:

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

Danke!

Answer 1

Sie müssen brown in variables.scss Datei deklarieren und dann wie unten gezeigt verwenden.

variables.scss

colors: (primary: #488aff, brown: brown); 

.scss

wood { 
    .wood-selected { 
    background-color: color($colors, brown); 
    } 
}