如何在TypeScript中获取SCSS变量？求最优实现方案

嘿，你的这个实现思路其实已经很靠谱了——借助CSS自定义属性（也就是你在:root里定义的变量），通过浏览器原生API读取这些值再应用到元素配置对象中，这本身就是前端领域里跨CSS和JS共享样式值的标准玩法之一。不过我们可以从代码的可维护性、简洁性上再做些优化，让方案更优雅～

先肯定你的现有实现 #

你的做法有两个很赞的优点：

• 遵循了单一数据源原则：所有颜色值都维护在SCSS里，避免了CSS和JS两边硬编码重复值，后续改颜色只需要改一处
• 兼容性拉满：getComputedStyle是浏览器原生API，支持所有现代浏览器，甚至IE11都能搞定

优化方案建议 #

1. 封装读取CSS变量的工具函数 #

把重复的getComputedStyle逻辑抽成一个小函数，避免代码冗余，也让可读性更好：

// 封装成工具函数，复用性拉满
const getRootCssVar = (varName: string): string => {
  // 用trim()去掉变量值前后可能的空格，避免样式异常
  return window.getComputedStyle(document.documentElement)
    .getPropertyValue(varName)
    .trim();
};

// 调用起来就清爽多了
this.normalRate = getRootCssVar("--normal-rate");
this.specialRate = getRootCssVar(RateColor.SpecialRate);
this.flatRate = getRootCssVar(RateColor.FlatRate);

2. 省去中间变量，直接在对象中调用 #

如果这些颜色值只用来生成obj，完全可以跳过单独定义normalRate这类变量的步骤，直接在创建对象时调用工具函数，减少不必要的变量声明：

const getRootCssVar = (varName: string): string => {
  return window.getComputedStyle(document.documentElement)
    .getPropertyValue(varName)
    .trim();
};

this.obj = [
  { 
    title: '', 
    allDay: false,
    // ...其他属性
    backgroundColor: getRootCssVar(RateColor.SpecialRate), 
    borderColor: getRootCssVar(RateColor.SpecialRate) 
  },
  { 
    title: '', 
    allDay: false,
    // ...其他属性
    backgroundColor: getRootCssVar("--normal-rate"), 
    borderColor: getRootCssVar("--normal-rate") 
  },
  { 
    title: '', 
    allDay: false,
    // ...其他属性
    backgroundColor: getRootCssVar(RateColor.FlatRate), 
    borderColor: getRootCssVar(RateColor.FlatRate) 
  }
];

3. TypeScript类型安全强化 #

既然用了TS，那可以把CSS变量名做成枚举，避免拼写错误，还能获得编辑器的类型提示：

// 定义枚举，把变量名统一管理
enum RateColor {
  NormalRate = "--normal-rate",
  SpecialRate = "--special-rate",
  FlatRate = "--flat-rate"
}

// 调用时编辑器会自动提示，再也不用担心写错变量名啦
getRootCssVar(RateColor.NormalRate);

补充：另一种方案——CSS Modules（如果项目支持） #

如果你的项目已经用上了CSS Modules，也可以直接在TS里导入SCSS变量，不过这种方式需要提前配置SCSS导出变量：

// 在你的SCSS文件里加一段导出代码
:export {
  normalRate: #00008b;
  specialRate: #80d4ff;
  flatRate: #F7941D;
}

然后在TS里直接导入使用：

import styles from './your-styles.module.scss';

this.obj = [
  { 
    // ...其他属性
    backgroundColor: styles.specialRate, 
    borderColor: styles.specialRate 
  },
  // ...其他配置项
];

这种方式的好处是不需要通过浏览器API读取，编译阶段就能拿到值，但缺点是无法响应CSS变量的动态变化——如果运行时修改了:root里的变量值，TS里导入的旧值不会自动更新。而你原来的方法可以实时获取最新的CSS变量值，这是它的核心优势。

最后总结 #

你的原始实现已经是正确且实用的方案，尤其是需要支持CSS变量动态更新的场景，这种方法就是最优解。上面的优化只是让代码更整洁、更好维护，你可以根据项目的实际情况选适合的方式～

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