如何将TypeScript颜色变量传递至HTML div？（含SCSS场景）

要实现把TypeScript中的颜色变量传递给使用SCSS的div元素，核心是通过HTML元素的style属性绑定CSS自定义属性（变量），再让SCSS样式引用这个变量。具体操作如下：

1. 在TypeScript中定义颜色变量 #

先在TS文件里声明你要使用的颜色变量：

// 示例颜色值，可根据需求修改
colorBorder: string = "#ff4500";

2. 在HTML元素上绑定CSS自定义属性 #

根据你使用的框架/场景，把TS变量的值赋值给元素的--colorBorder CSS变量：

Angular场景 #

<div class="colorBorder" [style.--colorBorder]="colorBorder">
  <!-- 这里放div的内容 -->
</div>

原生JS/TS场景 #

如果是原生环境，先给div加ID，再通过TS设置样式：

<div class="colorBorder" id="borderContainer">
  <!-- 这里放div的内容 -->
</div>

const borderContainer = document.getElementById('borderContainer');
if (borderContainer) {
  borderContainer.style.setProperty('--colorBorder', colorBorder);
}

3. 完善SCSS样式 #

你的原SCSS代码缺少边框样式（比如solid），补充后保持引用CSS变量即可：

.colorBorder{
    border: 5px solid var(--colorBorder);
}

原理说明 #

CSS自定义属性（--xxx格式）支持动态赋值，通过TS把颜色值注入到div的style属性后，SCSS中的var(--colorBorder)就能读取到这个动态值，从而实现TS变量到SCSS样式的传递。

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