使用less的宏机制（mixin）自动化生成多主题css设计令牌，核心做法是定义一个包含所有颜色变量的混合选择器，并通过传入不同的参数值来实例化具体的主题。只需在根元素或特定容器上调用该混合选择器并传入对应的色值，即可自动输出完整的css变量集合，从而实现一套代码管理多个视觉主题。
如何定义支持动态参数的基础混合选择器
定义基础混合选择器的关键在于使用带默认值的参数列表，将设计令牌映射到具体的颜色变量上。通过为每个参数设置合理的默认值，可以确保在未传参时仍能输出标准主题，而在需要自定义时又能灵活覆盖特定色值。
@mixin generate-theme(@primary: #3498db, @secondary: #2ecc71, @background: #ffffff, @text: #333333) {
--color-primary: @primary;
--color-secondary: @secondary;
--color-background: @background;
--color-text: @text;
}上述代码定义了一个名为 generate-theme 的混合选择器，它接收四个参数，分别对应主色、辅色、背景色和文本色。每个参数都赋予了十六进制颜色作为默认值。当调用此混合选择器时，Less会将传入的实际参数值替换掉默认值，并生成对应的CSS自定义属性。这种结构使得设计令牌的定义与具体主题解耦，提高了代码的可维护性。
立即学习“前端免费学习笔记（深入）”；
如何在不同上下文中应用生成的主题
在不同上下文中应用生成的主题，只需在目标选择器内部调用已定义的混合选择器，并传入符合当前主题需求的参数值。这种方式允许在同一份Less文件中轻松切换或嵌套多种主题风格，无需重复编写变量赋值逻辑。
.light-theme {
.generate-theme(#ffffff, #f0f0f0, #333333, #000000);
}
.dark-theme {
.generate-theme(#1a1a1a, #2d2d2d, #e0e0e0, #ffffff);
}在 .light-theme 和 .dark-theme 两个类中，分别调用了 generate-theme 混合选择器，并传入了截然不同的颜色参数。对于浅色主题，主色设为白色，文本色设为黑色；而对于深色主题，则反之。编译后，浏览器会根据元素所属的类名应用相应的CSS变量，从而实现主题的无缝切换。这种方法不仅简化了主题管理的复杂度，还确保了设计令牌的一致性。
基于传入参数为空时的默认行为处理
当调用混合选择器时未传入任何参数，Less会使用定义时指定的默认值进行渲染。这意味着如果开发者忘记传递特定主题所需的色值，系统仍会输出一个可用的、基于预设默认值的设计令牌集合，避免样式缺失导致的布局错乱。
