less不支持运行时if语句，需用守卫（when）、参数化混合和预定义变量实现编译期皮肤切换，如通过@skin-type分支注入不同色值，并配合入口文件分别编译生成独立css。
Less里没有if语句，别硬写条件判断
Less本身不支持运行时逻辑判断（比如 if、else），所有“动态”都得靠预编译期的混合（.mixin）、守卫（when）和变量插值实现。试图用 JavaScript 式条件写法（如 if (@skin == 'dark') { ... }）会直接报错或静默失效。
- 守卫只在编译时匹配，不能响应用户切换皮肤等运行时行为
- 变量必须是已知字面量（
@skin: dark;），不能来自 DOM 或 localStorage - 所谓“动态生成”，本质是为每种肤色预编译出独立 CSS 文件，不是单文件内实时切换
用守卫 + 参数化混合控制肤色变量注入
核心思路是把肤色抽象成参数，用守卫决定哪组颜色值生效。例如定义基础色板混合：.skin-colors()，再按 @skin-type 值分支注入不同色值：
.skin-colors() when (@skin-type = light) {
@primary: #007bff;
@bg: #ffffff;
@text: #333333;
}
.skin-colors() when (@skin-type = dark) {
@primary: #0056b3;
@bg: #1a1a1a;
@text: #e9ecef;
}
.skin-colors() when (@skin-type = olive) {
@primary: #556b2f;
@bg: #f5f5dc;
@text: #333300;
}
之后在组件中调用：.skin-colors();，再用 @primary 等变量生成样式。注意：守卫必须写在调用前，且 @skin-type 需提前定义（如顶层 @skin-type: dark;）。
避免重复编译：用入口文件统一控制皮肤类型
每个皮肤对应一个入口 Less 文件（如 light.less、dark.less），它们只做两件事：定义 @skin-type，再 @import 公共样式。这样能保证变量作用域干净，也方便构建工具批量输出：
// dark.less @skin-type: dark; @import "base.less"; @import "components/buttons.less";
- 不要在
base.less里定义@skin-type，否则所有皮肤都会用同一个值 - 构建时用 Webpack 的
less-loader或 CLI 分别编译light.less和dark.less，产出独立 CSS - 如果用
@import (reference)引入公共文件，需确认守卫仍能正确匹配——引用模式下变量不会污染全局，但守卫仍有效
肤色变量命名要带语义，别用 magic number
直接写 @bg: #1a1a1a; 很难维护。应该用语义化变量名，并在皮肤混合里统一映射：
.skin-colors() when (@skin-type = dark) {
@color-bg-canvas: #1a1a1a;
@color-text-primary: #e9ecef;
@color-border-divider: #333;
}
组件中用这些语义名：background-color: @color-bg-canvas;。这样换肤时只需改混合内部映射，不用遍历所有组件找 #1a1a1a 替换。
守卫不支持正则或范围判断，when (@skin-type > 5) 这类写法无效；多值匹配要用逗号分隔：when (@skin-type = dark), (@skin-type = high-contrast)。真正复杂的皮肤逻辑（比如根据系统偏好自动选色）得交给 CSS 自定义属性或 JS，Less 只负责静态生成。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
