css 中无法进行字符串拼接，唯一合法方式是 calc(100% - var(--gap))；sass/less 插值和 js 模板字符串均属编译期或运行时操作，非 css 原生能力。
因为 calc() 是运行时 CSS 函数，而字符串拼接（如 "100% - " + --gap）在 CSS 中根本不存在——CSS 没有字符串操作能力，也不支持运算符重载或模板字面量。
浏览器根本不解析“字符串拼接”这种写法
CSS 语法里没有 + 作为字符串连接符的概念。当你试图写类似 width: "100% - " + var(--gap) 的代码，浏览器会直接报错或静默忽略整条声明，因为这违反了 CSS 声明值的基本语法规则。
-
var(--gap)只能在calc()内部作为函数调用使用，不能被当作 JS 那样的表达式参与外部拼接 - 所有看似“拼接”的行为，实际都发生在预处理器（Sass/Less）编译期，或由 JS 动态设置
style属性完成 - 纯 CSS 中唯一合法的拼接方式，是通过
calc()自身的运算逻辑，例如calc(100% - var(--gap))
Sass/Less 中的 #{$gap} 不是字符串拼接，而是插值输出
像 calc(100% - #{$gap}) 这种写法，本质是 Sass 在编译时把变量值原样注入到字符串中，不是运行时计算，也不是 CSS 层面的拼接。
- 如果
$gap: 20px，它输出的是calc(100% - 20px)—— 一个合法的 CSS 值 - 如果
$gap: 20（没单位），输出calc(100% - 20)，因单位缺失被浏览器丢弃 - 写成
"100% - " + $gap会被 Sass 当作非法表达式报错，Sass 不支持这种加号连接字符串
JS 动态设置时，style.width = `calc(100% - ${gap})` 才是真拼接
只有在 JavaScript 中，你才能用模板字符串做拼接，但这时拼出的必须是完整、合规的 calc() 字符串，且变量值要自带单位。
- ✅ 正确：
el.style.width = `calc(100% - ${getGap()}px)`（假设getGap()返回数字） - ✅ 更稳妥：
el.style.width = `calc(100% - ${gapValue})`（gapValue已含单位，如"20px"） - ❌ 错误：
el.style.width = "calc(100% - " + gap + ")"，容易漏空格，生成calc(100%-20px)失效
真正容易被忽略的是：你以为在“拼接”，其实是在不同阶段（编译期 / 运行时）和不同语言（Sass / CSS / JS）之间切换上下文——每个环节对空格、单位、括号的要求都独立成立，少一个就断链。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
