Angular中如何将TS计算的百分比变量传入SCSS使用？

SCSS是项目构建阶段就会预编译成静态CSS的，不存在直接把运行时TS计算出的变量传入SCSS的可能——所有SCSS变量在打包完成后都会被替换为固定静态值，无法响应页面运行时的动态逻辑。要实现你要的圆形进度条效果，用Angular原生的样式绑定能力即可，下面是两种适配你现有代码的落地方案：

方案1：直接绑定内联样式（改造成本最低） #

你不需要保留SCSS里写死的stroke-dashoffset规则，直接在模板中给进度条圆环元素绑定动态样式即可，完全复用你已经写好的计算逻辑。
首先在TS里补一个偏移量计算方法，和你原来的calc逻辑保持一致：

// cards.component.ts
nbLessonsFinish(){
  return 3 // 后续替换为实际已完成课时统计逻辑
}

nbLessonsInChapter(){
  return 10 // 后续替换为章节总课时统计逻辑
}

percentage(){
  return (( this.nbLessonsFinish() / this.nbLessonsInChapter()) * 100)
}

// 新增：计算圆环的stroke-dashoffset值，固定周长865和你原有SCSS逻辑一致
getStrokeOffset(){
  const prc = this.percentage()
  return 865 - (865 * prc)/ 100
}

然后在模板里给对应圆环绑定样式属性即可，三个卡片分别绑定各自对应的计算方法返回值：

<!-- 对应CSS卡片的进度圆环 -->
<svg>
  <circle></circle>
  <circle [style.stroke-dashoffset]="getCSSTrackOffset()"></circle>
</svg>

<!-- 对应HTML、算法卡片的圆环用相同方式绑定各自的偏移量计算方法即可 -->

原来SCSS中写死stroke-dashoffset的三行规则可以直接删掉。

方案2：绑定CSS自定义变量（保留SCSS样式结构） #

如果你想把样式规则统一留在SCSS文件里维护，可以通过Angular把动态值绑定为CSS自定义属性（CSS变量），SCSS直接读取运行时的CSS变量值即可。
首先在卡片的外层容器上绑定动态CSS变量：

<!-- CSS卡片外层 -->
<div class="CSS" [style.--css-prc]="percentage()">
  <!-- 卡片内部SVG和其他内容保持不变 -->
</div>

<!-- HTML、算法卡片同理，绑定各自的百分比值到对应变量 -->

然后修改SCSS代码，把原来的硬编码值替换为CSS变量读取：

.CSS svg circle:nth-child(2) {
  stroke-dashoffset: calc(865 - (865 * var(--css-prc))/ 100);
}

.HTML svg circle:nth-child(2) {
  stroke-dashoffset: calc(865 - (865 * var(--html-prc)) / 100);
}

.ALGORITHMIQUE svg circle:nth-child(2) {
  stroke-dashoffset: calc(865 - (865 * var(--algo-prc)) / 100);
}

这个方案不需要改动你原有SCSS的选择器结构，只需要把硬编码的动态值换成CSS变量即可，维护成本更低。

注意：不要尝试任何给SCSS变量直接传TS值的方案，这类方案要么是编译阶段传固定值（没法响应运行时变化），要么是第三方预处理器的hack，在Angular原生场景下完全没必要用。

参考效果：

内容的提问来源于stack exchange，提问作者Wvxil