如何在Angular项目中动态修改SCSS变量

结论 #

你无法直接在TS函数中修改SCSS变量。
SCSS属于CSS预处理器，所有$开头的SCSS变量只会在项目构建编译阶段存在，编译完成后会被直接替换为对应的固定色值，输出为浏览器可识别的普通CSS，运行阶段不存在SCSS变量的概念，自然无法动态访问和修改。

可行实现方案 #

方案1：搭配CSS原生自定义变量（推荐，支持任意颜色动态修改）

这是目前最通用的动态换色实现方式，步骤如下：

1. 调整你的SCSS定义，把SCSS变量和CSS原生变量绑定：

$primary: red !default;

:root {
  /* 将SCSS变量值赋值给CSS原生变量，兼顾原有SCSS逻辑 */
  --primary: #{$primary};
}

/* 原有项目中所有用到$primary的位置，都可以替换为CSS变量调用，后续动态修改才会生效 */
/* 示例： */
.btn {
  background-color: var(--primary);
}

2. 在TS的changeColor函数中直接修改CSS原生变量即可：

changeColor(newColor: string) {
  // 修改根元素的CSS变量，全局所有引用了--primary的样式都会自动更新
  document.documentElement.style.setProperty('--primary', newColor);
}

方案2：预定义多套主题类切换（适合固定主题换色）

如果你的换色需求只有固定的几套可选颜色，不需要支持用户自定义任意颜色，可以用类名切换的方案：

1. 在SCSS中提前定义多套主题样式：

$primary-red: red !default;
$primary-blue: blue !default;
$primary-green: green !default;

.theme-red {
  .component {
    color: $primary-red;
  }
  /* 其他对应主题样式 */
}
.theme-blue {
  .component {
    color: $primary-blue;
  }
  /* 其他对应主题样式 */
}
.theme-green {
  .component {
    color: $primary-green;
  }
  /* 其他对应主题样式 */
}

2. 在TS函数中切换根元素的主题类：

changeColor(themeName: 'red'|'blue'|'green') {
  document.body.className = `theme-${themeName}`;
}

内容的提问来源于stack exchange，提问作者Berkay O.