SCSS无法对CSS变量var(--x)进行数学运算，所有计算必须用calc()且需确保单位匹配和空格正确；var()仅字符串替换，错误格式会导致声明被浏览器丢弃。
SCSS 本身不能对 var(--x) 做任何数学运算——它只是把字符串原样输出，浏览器运行时才解析变量。所有“计算”必须交给 CSS 的 calc()，且格式稍有不慎就静默失效。
为什么 var(--size) * 2 会直接消失？
var() 不是函数，不求值，只做字符串替换；var(--size) * 2 展开后可能是 16px * 2，而这不是合法 CSS 值，整条声明被浏览器丢弃，DevTools 里显示 strikethrough，控制台却无报错。
- 错误写法：
font-size: var(--base-font) * 1.2→ 编译可能通过，但运行时无效 - 正确路径：所有运算必须包裹在
calc()内，且操作数类型匹配 -
var(--base)的值必须带单位（如16px），calc()才能识别为长度
calc() 里乘除的数字必须无单位
calc(var(--gap) * 2) 合法，calc(var(--gap) * 2px) 非法——乘号右侧只能是纯数字，不能带单位。
- 安全定义：
--gap: 12px，然后用width: calc(var(--gap) * 3) - 若变量存的是纯数字（如
--col: 4），可用在grid-template-columns: repeat(var(--col), 1fr)，但别在calc()里混用单位 - 单位混合要显式写：
padding: calc(var(--gap) + 4px)或margin-left: calc(50% - var(--sidebar-width))
SCSS 插值和单位处理容易翻车
#{$val} * 2 不是运算，只是拼字符串；$val 是 20px 时，#{$val} * 2 输出字面量 20px * 2，CSS 不认。
立即学习“前端免费学习笔记（深入）”；
- 真正可运算的是 SCSS 原生变量：
$size: 20px; width: $size * 1.5→ 输出width: 30px - 从 map 或函数取值时，先用
if(unitless($input), $input + px, $input)统一单位 - 拼
calc()时，确保空格存在：calc(var(--a) + var(--b))✅，calc(var(--a)+var(--b))❌
复合选择器中变量作用域常被误判
.card:hover { background: var(--bg); } 取的不是 :root 定义的值，而是离得最近的、已声明该变量的祖先或自身（比如 .card 上设了 --bg: #f0f0f0）。
- 伪类（
:hover、:focus）不能声明变量，只能继承 - 想实现悬停变色，提前定义
--bg-hover，再在.card:hover里读取，别指望在:hover里重设 - 调试时打开 DevTools 的 Computed 面板，看「custom properties」栏逐层确认谁定义了、谁覆盖了、谁没生效
真正卡住人的从来不是语法怎么写，而是搞不清「变量在哪定义」「当前元素实际继承到哪个值」「calc() 拿到的是带单位还是纯数字」这三层嵌套关系。一个 var(--size) 在 :root 是 16px，被 JS 改成 20（漏掉单位），再被 calc() 读取——这时你看到的不是预期结果，而是静默失败。
