less字符串插值失效的根本原因是插值位置或上下文不合法：@{var}仅在特定位置生效，如content中需用~"@{var}"实现求值，而变量作属性名时必须是带引号的字符串且独占位置。
Less 字符串插值失效，根本原因不是写错了，而是插值位置或上下文不合法——@{var} 只在特定位置生效，其他地方它就是普通文本。
为什么 @{color} 在 content 里原样输出
Less 编译时把 content 当作字符串字面量处理，@{color} 不会被展开，而是直接编译成 content: "@{color}";，浏览器就显示 "@{color}" 这五个字符。
- 必须用双引号包裹 + 显式插值：
content: "@{color}";→ 错，仍是字面量 - 正确写法是：
content: ~"@{color}";，~""表示“按字符串拼接并求值”，但仅限于属性值上下文 - 如果
@color是颜色变量（如@color: #333;），~"@{color}"会输出"#333"，带引号 → 浏览器解析为字符串而非颜色，color: ~"@{color}";会失效 - 真正安全的
content插值只适用于纯文本变量：@text: "hello"; content: ~"@{text}";
@{prop} 用作 CSS 属性名总报错
Less 不允许变量直接当属性名，@prop: color; @{prop}: red; 是非法语法，编译器会报 Expected a variable name 或静默忽略整条规则。
- 必须确保变量值是字符串：
@prop: "color";（注意引号） - 插值必须独占属性名位置：
@{prop}: red;✅，不能写成border-@{prop}: red;❌（这会被当作文本拼接，需用~"border-@{prop}"） - 旧版 Less（
- 常见陷阱：变量里混入空格或连字符未转义，比如
@key: "border-color";正确，但@key: border-color;（没引号）直接报错
在 calc() 里用 Less 变量没效果
calc() 是运行时 CSS 函数，Less 变量必须在编译阶段展开，否则最终 CSS 里留着 @width 这种符号，浏览器不认识。
- 错误写法：
width: calc(@width - 10px);→ 输出width: calc(@width - 10px);，无效 - 正确写法：
width: calc(~"@{width} - 10px");，~""触发字符串拼接后由 Less 展开变量 - 更推荐直接运算：
width: calc(@width - 10px);仅在@width是带单位数值（如@width: 100px;）时才有效；若它是字符串或未定义，会失败 - 别依赖
math配置修复——Less 4.0 已移除字符串型math参数，calc()内部不参与 Less 运算
外部 URL 导入时 @{url} 拼接失败
@import 不支持变量插值，@url: "https://..."; @import @{url}; 必然报错，因为 Less 把它当本地路径解析。
-
~转义只对字符串字面量有效：@import url(~"https://fonts.googleapis.com/...");✅ -
@import ~@url;❌ 不支持变量插值，~后必须紧跟双引号字符串 - 想动态换 CDN 地址？得靠构建时环境变量注入，或用 JS 动态创建
<link>，Less 层做不到 - 字体
@font-face中的src: url(...)不需要~，那是属性值，不是@import指令
插值不是万能胶，它只在编译器明确识别出“这里该放标识符”的上下文中起作用。写之前先问一句：这个位置，Less 是当代码解析，还是当字符串吐出去？答案决定了你该用 @{x}、~"@{x}"，还是干脆别插值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
