Less 3.5+ 支持对象字面量模拟 Map，如 @font-sizes: { xs: 12px; sm: 14px; };，配合 get() 编译期静态查表，仅接受字面量 key，可封装函数（如 .fs()）并联动 .each() 批量生成类，但无法动态操作或自动同步 CSS 自定义属性。
Less 中没有原生 Map 类型，但可以用对象字面量模拟
Less 本身不支持 JavaScript 那样的 Map 或 Object 运行时查表能力，但自 3.5+ 起支持「对象字面量」语法（@font-sizes: { xs: 12px; sm: 14px; base: 16px; lg: 18px; xl: 20px; };），配合 get() 函数可实现类似查表的取值逻辑。
关键点在于：这个「对象」是编译期静态结构，不能动态增删键，也不能用变量当 key 去查（比如 get(@font-sizes, @size-key) 会报错），必须用字面量 key。
-
get()只接受字符串字面量作为第二个参数，例如get(@font-sizes, sm)✅，get(@font-sizes, @key)❌ - 对象定义必须顶格、无缩进，且键名不能带引号（
sm:不是"sm":） - 嵌套对象也支持，如
@type-scale: { h1: { size: 32px; line-height: 1.2; }; p: { size: 16px; }; };，取值用get(get(@type-scale, h1), size)
用函数封装查表逻辑，避免重复写 get()
每次手动写 get(@font-sizes, lg) 不仅冗长，还容易拼错 key。更实用的做法是封装一个 fs()（font-size 的缩写）函数：
@font-sizes: {
xs: 12px;
sm: 14px;
base: 16px;
lg: 18px;
xl: 20px;
};
.fs(@size) when (isstring(@size)) {
font-size: get(@font-sizes, @size);
}
.fs(@size) when (isnumber(@size)) {
font-size: @size;
}
这样就能统一调用：.fs(xs) → font-size: 12px;，.fs(1.2em) → 直接透传数值。注意两个守卫条件（when）缺一不可，否则类型冲突会导致编译失败。
Key 名和 CSS 类名保持一致能减少维护成本
如果你同时生成响应式字号类（如 .text-xs、.text-lg），建议让对象 key 和 class 名完全对齐：
@font-sizes: {
xs: 12px;
sm: 14px;
base: 16px;
lg: 18px;
xl: 20px;
'2xl': 24px;
};
// 批量生成类
.each(@font-sizes, {
.text-@{key} {
font-size: @value;
}
});
这里用了 Less 内置的 .each() 循环函数。注意：'2xl' 必须加单引号，否则 2xl 会被解析为数字 2 乘以变量 xl；而 @{key} 是插值语法，确保输出类名是 .text-2xl 而不是 .text-'2xl'。
- 别用连字符命名 key（如
font-sm），Less 会把它当作减法运算 - 如果 key 含数字或特殊字符，一律加引号，并在循环中用
@{key}插值，不能直接写@key - 这种写法生成的 CSS 是静态的，不会因运行时条件变化——它只是编译时的“查表”，不是 JS 里的 Map.get()
与 CSS 自定义属性联动时要注意作用域和 fallback
想把 Less 查表结果同步到 :root 的 --font-size-xs 等变量？可以，但得手动映射，Less 不会自动导出：
:root {
--font-size-xs: @{font-sizes[xs]};
--font-size-sm: @{font-sizes[sm]};
--font-size-base: @{font-sizes[base]};
}
@{font-sizes[xs]} 是 Less 的「方括号取值」语法，比 get() 更灵活（支持变量 key，但此处仍需字面量），且只在顶层作用域有效。如果 @font-sizes 定义在嵌套规则里，这里会取不到。
更重要的是：CSS 自定义属性是运行时生效的，而 Less 查表是编译时完成的。一旦你后期改了 @font-sizes 但忘了同步更新 :root 里的变量，样式就会不一致——这个断层最容易被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
