如何在.scss文件中获取.ts文件的变量值？

Question

我正在使用仅限CSS的饼图。我想在我的scss中使用 this.performance 的值来定义百分比。如何从.ts文件控制我的scss文件？   我在scss中的css代码如下所示：

$configs: (
  chart-one: (
    svgSize: 200px,
    percentage: 32,
    strokeWidth: 1px,
    backgroundColor: #305556,
    foregroundColor: #79be9b,
    labelColor: #c6e8d7,
    labelFontSize: 2.5rem,
    duration: 3s,
    animationDelay: 1s
  )
);

我的代码：

this.total=data[0][0].TOTAL;
    this.completed=data[2][0].COMPLETED;
 this.performance=((this.completedontime/this.total)*100);

要求 - ＆gt; 如何使用 this.performance 的值代替百分比：32

Answer 1

不可能这样做。 Sass和TypeScript是不同的技术，不知道彼此的存在。 Angular甚至不知道你首先使用的是Sass，因为在Angular到达它之前它已经编译成CSS。当然，这里最大的问题是 Sass变量是构建时间的工件。

也就是说，可能可以理论通过使用自定义webpack加载器来完成静态可分析的TypeScript文件，但是＆ ＃39;不需要它，因为你已经可以使用Sass循环和条件语句。

如果您需要在运行时影响CSS，那么您应该使用CSS custom properties。它们可以通过JavaScript DOM API访问，这意味着您可以在Angular代码中使用它。