Less中变量名不能含连字符，@shadow-1会被解析为@shadow减1而报错；应改用@shadow1等合法命名；可用递归mixin.gen-shadows安全生成.shadow-1至.shadow-24类。
为什么直接用 @shadow-1 这类变量名会出问题
Less 中变量名不能包含连字符（-），写成 @shadow-1 会被解析为 @shadow 减去数字 1，编译直接报错：Operation on an invalid type。这是新手最常卡住的第一步。
正确做法是改用下划线或驼峰：用 @shadow_1 或 @shadow1，确保变量名合法且可读。
- 推荐统一用
@shadow1、@shadow2…——简洁、无歧义、支持自动补全 - 避免
@shadow_level_1这类冗长命名，除非项目强制要求语义化 - 所有 shadow 变量必须在使用前定义，否则引用时值为
undefined，最终生成空字符串
如何用循环批量生成 .shadow-1 到 .shadow-24 类
Less 不支持原生 for 循环，但可用递归 mixin 模拟。关键是要控制好终止条件和参数传递，否则容易栈溢出或漏生成。
下面这个 mixin 能安全生成 24 级阴影类：
立即学习“前端免费学习笔记（深入）”；
.gen-shadows(@i: 1) when (@i =< 24) {
.shadow-@{i} {
box-shadow: @@shadow@{i};
}
.gen-shadows((@i + 1));
}
.gen-shadows(); // 启动
-
@@shadow@{i}是双重变量引用：先拼出变量名（如@shadow3），再取其值 - 必须加
when (@i = 守卫，否则无限递归 - 如果只需要 1–6 级，把
24改成6即可，无需删代码 - 注意：每个
@shadowN必须是完整合法的box-shadow值，例如0 1px 2px rgba(0,0,0,0.1)，不能只写偏移量
怎么让深色模式下自动切换阴影颜色
Less 本身不感知主题切换，但可以预定义两套变量，配合 CSS 自定义属性（--shadow-color）实现运行时切换。硬编码在 Less 里写 @media (prefers-color-scheme: dark) 是无效的——它不会被编译进 CSS，也不会响应系统变化。
推荐方案：用 CSS 变量兜底，Less 只负责生成初始值：
@shadow1: 0 1px 2px var(--shadow-color, rgba(0,0,0,0.1));
@shadow2: 0 2px 4px var(--shadow-color, rgba(0,0,0,0.12));
.shadow-1 { box-shadow: @@shadow1; }
.shadow-2 { box-shadow: @@shadow2; }
@media (prefers-color-scheme: dark) {
:root {
--shadow-color: rgba(0,0,0,0.3);
}
}
- 所有 shadow 值都依赖
var(--shadow-color)，这样一套 CSS 就能适配亮/暗双模式 - 必须给
var()提供 fallback（如rgba(0,0,0,0.1)），否则未设置 CSS 变量时会降级为空值 - 不要试图在 Less 中用
lighten()动态算暗色版——那只是编译时计算，无法响应用户系统切换
导出 JSON 配置或供 JS 读取的注意事项
Less 编译后只剩 CSS，变量信息全部丢失。如果前端 JS 需要动态读取 shadow3 的数值（比如做动画插值），不能靠解析 CSS，而应在构建时把变量同步输出为 JSON。
可行做法（以 webpack + less-loader 为例）：
- 写一个
shadows.config.js，定义所有shadow1～shadow24的原始值 - Less 文件通过
@import引入该 JS 导出的变量（需配置less-plugin-js-vars或类似插件） - 同时让构建脚本把同一份配置 dump 成
shadows.json，供 JSfetch或静态导入 - 切勿在 Less 里用
~"..."拼接 JSON 字符串——维护困难，且无法被 JS 安全解析
变量一旦跨技术边界（Less → JS → runtime），就必须有单一数据源，否则深度不一致的问题会在视觉和逻辑上同时暴露出来。
