从组件到scss的角调用变量

Question

是否可以从COMPONENT调用变量，然后将此变量放入SCSS文件？例如，当我调用COMPONENT时，此COMPONENT动态更改变量，然后在SCSS中使用此变量。

例如：

export class ScssComponent implements OnInit {
scssCall: number;

 ngOnInit(): void {
     this.scssCall = 10; //Variable for calling
 }
}

然后在SCSS中使用此变量，例如：

.mat-column-id {
flex: 0 0 (5 + scssCall)% !important; //call here
width: (5 + scssCall)% !important; //call here
}

Answer 1

包括来自单独文件的样式。

@Component({
  selector: 'app-questions',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.scss'],
})

将_variables.scss文件添加到组件的文件夹，并将其导入到test.component.scss中

@import 'variables';

.test-filter{
  a {
    color: $green;
  }
}