Less变量插值生成选择器的语法是@{variable}，必须用于选择器可展开位置，如.theme-@{theme}；变量需预先定义且值为合法CSS标识符，插值不可嵌套或参与表达式运算。
Less 变量插值生成选择器的语法是 @{variable}
Less 不允许直接用变量名当选择器，必须用插值语法包裹。比如你想根据主题名生成 .theme-dark 或 .theme-light，就得写成 .theme-@{theme}，其中 @theme 是已定义的变量。插值只在选择器、属性名、URL、@import 路径等少数上下文中生效，不能用在属性值内部（除非配合 ~"" 转义，但那属于另一类场景）。
插值只能出现在选择器的「可展开位置」，不能嵌套或拼接中间部分
以下写法会报错或不按预期工作：
-
.btn-@{size}-@{variant}✅ 合法，两个变量并列 -
.btn-@{size + '-sm'}❌ Less 不支持表达式求值，+会被当作非法字符 -
.@{prefix}header❌ 插值不能放在选择器开头且紧贴点号，Less 解析失败 -
.@{prefix}-header✅ 合法，前提是@prefix值为"main"这样的纯字符串
常见错误：插值后生成的选择器未被编译或样式丢失
这通常由三类原因导致：
- 变量未在插值前定义，比如
@{theme}出现在@theme: 'dark';之前 —— Less 按顺序解析，变量必须先声明 - 变量值含空格或特殊字符，如
@theme: 'dark mode';，插值后变成.theme-dark mode，CSS 语法错误 - 插值写在嵌套规则内但作用域不对，例如在
&:hover块里用@{name}，而该变量只在父作用域声明，需确认变量可见性
实际可用的动态选择器模式示例
下面这段 Less 能正常编译出多个主题类：
立即学习“前端免费学习笔记（深入）”；
@theme: 'dark';
@prefix: 'app';
.@{prefix}-container {
background: #333;
&.@{prefix}-@{theme} {
color: white;
}
&.@{prefix}-header {
font-weight: bold;
}
}
输出 CSS：
.app-container {
background: #333;
}
.app-container.app-dark {
color: white;
}
.app-container.app-header {
font-weight: bold;
}
注意：&.@{prefix}-@{theme} 中的 & 表示父选择器，插值必须紧跟其后，不能加空格，否则生成的选择器会多一个空格变成非法格式。
真正容易被忽略的是插值位置的“黏性”——它不像 JavaScript 模板字符串那样自由，每个 @{xxx} 必须严格落在 CSS 词法单元的边界上，稍有偏移就会让整个选择器失效。
