less 3.x 不支持原生 map 结构，所谓“映射功能”实为通过变量前缀（如@btn-size-xs）和带 when 条件的 mixin 模拟键值查找，属伪 map；不支持运行时变量插值（@@{...} 报错），动态访问需升级至 less 4+ 或导出为 css 自定义属性。
Less 3.x 本身不支持原生的 Map 数据结构，也没有类似 JavaScript 的 Map 或 Sass 的 map-get 那样的内置映射操作函数。所谓“CSS 映射 Map 功能”，实际是通过 Less 的变量嵌套命名约定 + 混合（.mixin）或函数式调用模拟实现的结构化管理——本质是「伪 Map」，靠命名空间和参数传递来达成键值查找效果。
用变量前缀模拟 Map 键值对
Less 不允许动态变量名（如 @{key} 在定义时不可展开），但可通过固定前缀 + 后缀变量的方式组织语义化键值：
例如定义一组按钮尺寸映射：
@btn-size-xs: 24px; @btn-size-sm: 32px; @btn-size-md: 40px; @btn-size-lg: 48px;
这种写法不是真正运行时查表，而是靠人眼/编辑器识别前缀 @btn-size- 表示同一组配置。它依赖命名一致性，适合静态、有限枚举场景。
- 必须统一前缀，否则无法批量提取或生成类名
- 不能用于条件判断（如
if (@size = 'sm') { ... }），Less 无运行时字符串比较能力 - VS Code 等编辑器能自动补全
@btn-size-开头的变量，提升可维护性
用混合（Mixin）封装“get”逻辑
要让调用端看起来像查 Map，可用带参数的 .mixin 模拟 get 行为：
.btn-size(@size) when (@size = xs) { height: @btn-size-xs; }
.btn-size(@size) when (@size = sm) { height: @btn-size-sm; }
.btn-size(@size) when (@size = md) { height: @btn-size-md; }
.btn-size(@size) when (@size = lg) { height: @btn-size-lg; }
.btn-size(@size) { /* fallback or error */ }
使用时：.btn-size(xs); → 输出 height: 24px;
- 每个
when分支对应一个“键”，本质是模式匹配而非哈希查找 - 必须显式列出所有支持的键，新增需同步加分支，不支持任意字符串键
- Less 3.x 不支持
extract()或get()类函数，这是最接近“Map 访问”的可行方式
避免用 @{...} 拼接变量名（常见错误）
有人尝试这样写：
@size: sm;
height: @@{'btn-size-' + @size}; // ❌ Less 3.x 不支持运行时变量插值作为变量名
这会报错：variable @btn-size-sm is undefined（因为 @@{...} 在 Less 3.x 中仅支持简单标识符，不支持表达式拼接）。
- Less 4.x 引入了
variable()函数才支持动态读取，但 3.x 完全不可用 - 试图用
@{'btn-size-' + @size}同样无效——这不是合法语法 - 若强行需要动态性，只能升级到 Less 4+，或改用构建时预处理（如 PostCSS 插件）
结构化导出需配合 CSS 自定义属性（推荐补充方案）
如果目标是让 JS 也能读取这些“Map”值，纯 Less 变量无法暴露到运行时。更实用的做法是：用 Less 生成 CSS 自定义属性，再由 JS 读取：
:root {
--btn-size-xs: 24px;
--btn-size-sm: 32px;
--btn-size-md: 40px;
--btn-size-lg: 48px;
}
然后在 Less 中复用：height: var(--btn-size-xs);，JS 中可通过 getComputedStyle 获取。
- 这绕过了 Less 的变量限制，把“Map”落地为真实可交互的 CSS 层面键值对
- 自定义属性天然支持字符串键，且浏览器兼容性在现代项目中已足够好（IE 不支持，需权衡）
- 注意：Less 编译时无法读取
var(--x)的计算值，所以不能用它做条件分支
真正难的是跨工具链的一致性——Less 里写的键，JS 和文档是否同步更新。这类“伪 Map”管理，核心不在语法多炫，而在团队是否严格遵守前缀规范与混合声明契约。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
