能否将CSS别名赋值为同名CSS变量？设计系统主题改造咨询

我正在调整设计系统的运作方式，尝试将CSS别名赋值为同名的CSS变量，请问这是否可行？

目前我们的主题方案是：先定义一套全局CSS tokens，再根据不同主题，将多组CSS别名关联到不同的全局tokens，示例如下：

global-tokens.scss

--global-color-white: #ffffff;
--global-color-black: #000000;

light-theme.scss

--background-color: var(--global-color-white);
--foreground-color: var(--global-color-black);

dark-theme.scss

--background-color: var(--global-color-black);
--foreground-color: var(--global-color-white);

现在我们打算修改tokens与别名的生成方式，不再使用全局tokens，而是直接将「别名」赋值为对应值。我们会向使用者提供这些别名，并根据主题切换CSS源文件，但遇到的问题是：能否按以下方式将别名赋值为同名变量？

light-theme.scss

--background-color: #ffffff;
--foreground-color: #000000;

dark-theme.scss

--background-color: #000000;
--foreground-color: #ffffff;

aliases.scss

--background-color: var(--background-color);
--foreground-color: var(--foreground-color);

回答 #

这种--background-color: var(--background-color);的写法完全不可行，因为这属于CSS变量的循环引用。浏览器解析时会陷入“用变量自身的值去赋值变量”的逻辑死循环，最终会判定这个变量声明无效，使用该变量的元素会 fallback 到默认样式或者继承值。

其实你的修改思路已经可以简化实现，根本不需要额外的aliases.scss文件：

• 切换主题时直接加载对应的light-theme.scss或dark-theme.scss；
• 业务代码里直接使用var(--background-color)、var(--foreground-color)这些变量就行，中间的别名层完全是多余的。

如果出于兼容旧代码、统一变量入口等原因必须保留别名层，那要避免同名循环，给别名变量和主题变量用不同的命名区分：

aliases.scss

--alias-background-color: var(--background-color);
--alias-foreground-color: var(--foreground-color);

之后业务代码里引用var(--alias-background-color)即可，这样既保留了别名的结构，又不会出现循环引用的问题。

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