CSS不支持字符串拼接，因解析器在语法阶段即拒绝非法结构；var()仅限属性值位置，+号、引号内或冒号左侧均触发静默失效或Invalid property name报错。
CSS 本身不支持字符串拼接，任何试图用 +、"100% - " + var(--gap) 或类似写法的操作，都会被浏览器直接拒绝——这不是运行时报错，而是语法解析阶段就失败。
为什么 CSS 解析器会直接报错
CSS 是声明式语言，所有属性名和值必须在解析时就是合法的字面量。解析器遇到 var(--gap) 只允许它出现在属性值位置，且只能作为 calc() 的参数或独立值；一旦出现在引号内、冒号左边、或被加号连接，就违反基础语法规则。
-
width: "100% - " + var(--gap);→ 整条声明被忽略（无错误提示，静默失效） -
var(--color): #333;→ 控制台报Invalid property name -
background: url("icons/" + $name + ".png");（Sass 中）→ 编译时报SassError: expected，因为url()不接受表达式
哪些“看起来像拼接”的操作其实不是 CSS 做的
所谓“拼接”，实际发生在三个不同阶段，混淆它们是绝大多数错误的根源：
-
Sass/Less 插值：如
url(#{"icons/" + $name + ".png"})，是编译期把变量值原样注入字符串，输出的是纯 CSS 字面量（如url("icons/home.png")） -
JavaScript 模板字符串：如
el.style.width = `calc(100% - ${gap}px)`，是 JS 运行时生成完整字符串，再交给 CSS 引擎解析 -
CSS calc() 内部运算：如
width: calc(100% - var(--gap))，是 CSS 自身支持的数值计算，不涉及字符串操作
动态变量名拼接的 JavaScript 常见翻车点
想用 JS 动态生成变量名（如 --delay-1、--delay-2），最容易写成这样：
立即学习“前端免费学习笔记（深入）”；
root.style.setProperty('--delay-"+ i +"', '2s');这会报 Unexpected token 或 EOF 错误，因为引号配对完全乱了。正确写法只有两种：
- 传统拼接：
root.style.setProperty('--delay-' + i, '2s'); - 模板字符串：
root.style.setProperty(`--delay-${i}`, '2s');
注意：变量名中不能含空格、不能以数字开头、必须以 -- 开头，且 i 必须是字符串或可隐式转为字符串的值（如数字）。
真正容易被忽略的是：你写的每一处“拼接”，其实都绑定在特定语言和执行时机上——CSS 不做、Sass 编译完就不管、JS 生成后必须保证结果是合法 CSS 字符串。少一个引号、漏一个反引号、单位没带、空格缺失，整条链就断了。
