Less属性名插值必须用带引号的字符串变量，如@key: "border-color"; @{key}: #333;，未加引号的@key: border-color; @{key}: #333;会报错，且插值仅在冒号左侧单独出现时生效。
Less属性名插值必须用带引号的字符串变量
Less不支持把未加引号的变量直接当属性名用，@prop: color; @{prop}: red; 这种写法必然报错——编译器会把它当成字面量 @{prop} 而非可替换标识符。真正起效的前提是：@prop 的值本身是字符串，且引号不能丢。
常见错误现象包括：ParseError: Expected a variable name、编译后生成 "color": red（带引号的非法CSS）、或整个规则被跳过。
-
@key: "border-color"; @{key}: #333;✅ 正确：双引号包裹，@{key}单独出现在冒号左侧 -
@key: border-color; @{key}: #333;❌ 错误：未加引号，Less解析为变量声明而非字符串字面量 -
@key: "margin-top"; .box { @{key}: 12px; }✅ 可用，但注意单位要显式写出，@{key}不处理单位拼接
插值只在属性名位置生效，其他地方行为完全不同
@{var} 的作用域非常受限：它仅在“冒号左边、且前后无其他字符”时才被识别为属性名插值。一旦出现在选择器、值、函数参数或拼接上下文中，就会退化为普通字符串拼接，甚至触发语法错误。
比如你想动态生成 background-image: url(@{path});，这不会按预期工作——@{path} 在值位置不展开，而是原样输出为 url("@{path}") 或直接报错。
立即学习“前端免费学习笔记（深入）”；
- 属性名：✅
@{prop}: red;→ 编译为color: red; - 选择器中：
.@{name} { }→ 需配合~"@{name}"才能拼接类名，否则报错 - 值中：
content: "@{text}";→ 输出纯文本"@{text}"，不是变量值；要用content: ~"'@{text}'";并确保@text是字符串 - 函数参数：
lighten(@{color}, 10%)→ 报错，应写成lighten(@color, 10%)
旧版本Less（≤3.13.x）对插值支持不完整
Less 3.13.1 之前版本对属性名插值的支持存在兼容性断层。部分写法在新版能跑通，在旧版直接卡死或静默忽略。如果你用的是 Webpack + less-loader，实际运行的 Less 版本由 less 包决定，而非 loader 版本。
执行 npx lessc --version 确认真实版本。若低于 3.13.1，升级是刚需——不仅插值更稳，AST 内存占用也降 40%+。
- 升级命令：
npm install less@^3.13.1 --save-dev（兼容 Webpack 4）或less@^4.2.0（需 Webpack 5） - 避免在插值结果里含空格、连字符以外的符号，如
@{prop}: "font-size"合法，但@{prop}: "data-id"会失败（CSS 属性名不支持data-前缀） - 嵌套中使用插值要格外小心：
&__item { @{key}: @val; }中的@key必须在当前作用域已定义，且不能被同名变量覆盖
伪元素 content 插值容易漏掉转义和类型转换
在 ::before / ::after 的 content 属性里用变量，本质是字符串注入，不是 CSS 值替换。直接写 content: "@{color}"; 会输出文字 @{color}，而不是颜色值；而 content: @color; 又会因缺少引号报错。
正确做法是强制转成字符串，并用 ~"" 解包。但要注意：数字型变量（如 @size: 12）插进去会丢掉 px，必须手动补全或改用字符串变量。
- 颜色变量：
@primary: #333; content: ~"'@{primary}'";→ 输出content: "#333"; - 尺寸变量：
@gap: 12px; content: ~"'@{gap}'";→ 必须带单位定义，否则@gap: 12;插进去就是"12" - 中文内容：
@text: "按钮"; content: ~"'@{text}'";→ 引号必须是英文单引号，且@text值本身要加双引号 - 绝对不要写
content: "@{text}";—— 这会被当作文本字面量，不是插值
@{key}，如果运行时值是 "font weight"（带空格），就会导致整条规则失效，且错误提示极其模糊。最稳妥的方式，是在变量定义处就约束格式，而不是靠插值时兜底。 
