less变量不能直接拼接url路径，因url()默认字面量保护；需用~""转义包裹，如~"url('@{bg-base}/hero.jpg')"；动态切换应通过mixin+条件判断实现，运行时换图则须用css自定义属性配合js。
Less变量不能直接拼接URL路径
Less的@variable在url()中直接插值会失败——比如url("@{bg-path}/hero.jpg")会被原样输出，浏览器收到的是字面量字符串而非解析后的路径。这不是语法错误，而是Less对url()内容默认做“字面量保护”，防止意外转义或注入。
真正可行的方式是用~""（转义字符串）包裹整个url()表达式，强制Less将其作为纯CSS输出：
@bg-base: "/assets/img";
@hero-bg: ~"url('@{bg-base}/hero.jpg')";
.section-hero {
background-image: @hero-bg;
}
动态切换需配合mixin + 参数传入
单纯靠变量做不到“运行时切换”，但可在编译期通过mixin参数控制生成哪套路径。适合主题包、多环境构建等场景：
-
@env设为"prod"或"dev"，再用when条件判断 - 把路径逻辑封装进mixin，调用时传参决定加载哪个目录
- 避免在每个选择器里重复写
~"url(...)”，统一收口更安全
.bg-img(@name, @env: prod) when (@env = prod) {
background-image: ~"url('/cdn/@{name}')";
}
.bg-img(@name, @env: dev) when (@env = dev) {
background-image: ~"url('/static/@{name}')";
}
.header { .bg-img("banner.jpg", prod); }
注意路径拼接中的斜杠和引号陷阱
Less不自动补斜杠，@base: "/img" + @file: "logo.png" 拼成@base@file结果是/imglogo.png——缺分隔符。同时，url()内引号类型必须匹配：单引号里不能嵌单引号，否则编译报错ParseError: missing closing ''
- 用
@base: "/img/"结尾加斜杠，或显式写@base + "/" + @file - 统一用单引号包裹整个
~""内容，内部文件名不额外加引号 - Windows路径反斜杠
在Less里是转义符，必须双写\或改用/
构建工具链中更推荐CSS自定义属性替代
如果目标是浏览器运行时换图（比如用户点主题按钮），Less变量完全无能为力——它只在编译期生效。此时应放弃Less路径变量，改用CSS Custom Properties + JS控制：
:root {
--bg-url: url("/assets/img/light/hero.jpg");
}
.section {
background-image: var(--bg-url);
}
然后JS里执行document.documentElement.style.setProperty('--bg-url', 'url(/assets/img/dark/hero.jpg)')。Less只负责提供基础结构，动态部分交给运行时。
真正容易被忽略的是：开发者常以为“Less变量能像JS模板字符串一样自由拼接”，但它的求值时机、作用域和字符串处理能力都极其有限——路径拼接不是功能缺失，而是设计使然。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
