如何在SASS的scale-color函数中使用CSS变量调整主题色亮度？

问题核心原因 #

Sass 是预编译工具，所有的 Sass 变量、内置函数（比如scale-color）都会在代码打包、编译为纯CSS的阶段完成计算，而var(--color-primary)是CSS原生变量，它的实际值只有在浏览器运行页面时才会被解析。你将Sass变量赋值为var(--color-primary)时，Sass拿到的只是一串无意义的字符串，无法识别为颜色值做亮度调整，因此代码无法正常运行。

可行解决方案 #

方案1：使用CSS原生相对颜色语法（适配现代浏览器）

已经标准化的CSS Color Module Level 5支持直接基于CSS变量做颜色运算，完全在浏览器运行时执行，适配动态配色需求。调整亮度的示例代码如下：

:root {
  --color-primary: blue;
  --color-secondary: red;
}

.logo{
  /* 基于主色提升30%亮度，可按需调整亮度增量 */
  background: lch(from var(--color-primary) calc(l + 30%) c h);
  height: 100px;
  width:100px;
} 

如果需要更好的兼容性，也可以用color-mix实现调亮效果，以下代码等价于原需求的加80%亮度效果：

background: color-mix(in srgb, var(--color-primary), white 80%);

方案2：预生成全色阶CSS变量（兼容性最优）

你提到同色系有固定的2深3浅共5种色值，可以直接在后台生成配色时，把所有色阶都输出为CSS变量，无需前端实时计算：

:root {
  --color-primary: blue;
  --color-primary-light-1: #xxx; /* 第一级浅色 */
  --color-primary-light-2: #xxx; /* 第二级浅色 */
  --color-primary-light-3: #xxx; /* 第三级浅色 */
  --color-primary-dark-1: #xxx; /* 第一级深色 */
  --color-primary-dark-2: #xxx; /* 第二级深色 */
  --color-secondary: red;
  /* 同理生成副色的全色阶变量 */
}

.logo{
  background: var(--color-primary-light-3);
  height: 100px;
  width:100px;
}

这种方案不依赖新CSS特性，兼容所有支持CSS变量的浏览器，且颜色完全匹配设计体系，不会出现计算色差。

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