less变量不能直接拼接生成类名，因@name必须是编译期已知字符串字面量；可用each()遍历列表批量生成类名，避免嵌套插值失控；真动态需求应交由css自定义属性或js运行时处理。
Less变量不能直接拼接生成类名
Less的变量是编译期静态值，@name 本身不支持字符串拼接后作为选择器名动态输出。你写 .@{name}-btn 是合法的，但前提是 @name 必须是已知字符串字面量（如 @name: "primary"），不能是运行时计算或用户输入——毕竟Less没有运行时环境。
常见错误是试图用循环或函数“生成一堆类”，结果发现编译报错或输出不符合预期，比如：
@colors: red, blue, green;
each(@colors, { .@{value}-bg { background: @value; } }); // ✅ 可行（Less 4.0+）
// 但下面这句会报错：
.@{userInput}-text { color: #333; } // ❌ @userInput 未定义或来自外部JS？不行
用 each() 配合列表批量生成类名
这是最常用、也最稳妥的方式：把要生成的类名关键词预先定义为列表，用 each() 遍历并构造选择器。
-
each()是Less内置函数，支持嵌套、插值和属性注入，适合生成模式化类名 - 列表项必须是字符串或可转为字符串的值（数字、关键字都行）
- 注意插值语法：
.@{value}-border中的@{value}会原样展开，不加引号
示例：
@sizes: xs, sm, md, lg;
each(@sizes, {
.p-@{value} { padding: unit(4 * index(), px); }
.m-@{value} { margin: unit(4 * index(), px); }
});
编译后得到 .p-xs、.p-sm 等真实类名，且 index() 可辅助计算数值，比硬编码更灵活。
避免在变量中存选择器片段再拼接
有人会想：先定义 @prefix: "u"，再写 .@{prefix}-text —— 这看似可行，但极易失控：
- 多个层级嵌套插值（如
.@{a}-@{b}-@{c}）可读性差，调试困难 - 一旦某个变量为空或含空格/特殊字符，编译直接失败，错误提示不友好
- 无法做条件判断（比如“只对 dark 模式生成
.dark-@{name}”），Less 的if()不作用于选择器上下文
真正需要条件分支时，应改用 .when 保护块 + 显式列表，而不是靠变量拼接兜底。
需要真·动态？交给CSS自定义属性或JS
如果类名必须由用户操作、主题切换或API响应实时决定（比如后台返回 theme: "corporate-v2"），Less无能为力——它只在构建时运行一次。
此时正确路径是：
- 用Less生成基础原子类（如
.bg-primary、.text-accent） - 运行时通过JS读取数据，设置
document.body.className或style.setProperty() - 配合CSS自定义属性（
--theme-color）做样式响应，而非生成新类名
强行让Less“动态”，最后往往变成构建脚本里调用 lessc 传参、或用 Node.js 拼字符串再写入.less文件——绕远路，还失去热重载和开发体验。
真正难的不是“怎么写”，而是分清哪些该在编译期定死，哪些必须留给运行时接管。变量插值只是语法糖，不是魔法。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
