カスタムコンポーネントのスタイルシートでカスタムコンポーネント変数を使用する方法は？

Question

のは、私はカスタムコンポーネントがあるとしましょう - WoodComponent（/src/components/wood/wood.ts）：私は、コンポーネントのスタイルシートに色の変数を使用する方法

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

を（/ SRC /コンポーネント/木/ wood.scss）？例：

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

ありがとうございます！

Answer 1

brownをvariables.scssファイル内に宣言し、次に示すように使用する必要があります。

variables.scss

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

.scss

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