scss中无法对var(--size)进行算术运算，因其在编译期仅为字符串占位符；所有数值运算须在scss变量或纯数字上进行，css层缩放需依赖calc()配合单位处理。
SCSS 中写 var(--size) * 2 不会算出结果，因为 var() 在 SCSS 编译期只是字符串占位符，根本不会被解析为数值，更不可能参与乘除运算——浏览器运行时才处理 var()，但那时 SCSS 早已退出舞台。
SCSS 编译期 vs 浏览器运行时：两个世界互不相见
var(--size) 是纯 CSS 运行时语法，Sass 编译器根本不认识它。它既不是函数，也不是表达式，只是原样透传的文本。你在 SCSS 里写：
.box { width: var(--size) * 2; }
会被编译成一模一样的 CSS：
.box { width: var(--size) * 2; }
而浏览器看到 var(--size) * 2 就直接报错或静默丢弃整条规则——这不是 Sass 的问题，是 CSS 语法本身不支持这种写法。
- Sass 变量（如
$size: 24px）能在编译期做$size * 2，因为它是 Sass 自己的类型系统 - CSS 变量（
--size: 24px）只能靠calc()在浏览器里算，且必须显式包裹 - 你不能在 Sass 里对
--size做@if判断，也不能把它传给lighten()
正确做法：把计算逻辑交给 calc()，但单位必须提前对齐
所有数学运算必须落在浏览器运行时，用 calc() 包裹 var()，且变量值的单位要和运算目标匹配：
- ✅ 安全定义：
--size: 24;（纯数字），然后width: calc(var(--size) * 1px); - ✅ 或者：
--size: 24px;，然后width: calc(var(--size) * 2); - ❌ 危险组合：
--size: 24px;+calc(var(--size) + 10px)→ Safari 15.4 之前可能失败，建议写成calc(10px + var(--size)) - ❌ 更危险：
--size: 24;+calc(var(--size) * 1rem)→ 单位混用，CSS 不认
SCSS 插值时常见翻车点
想在 SCSS 里拼 calc()？必须用 #{$size} 显式插值，否则 Sass 会误判为调用内置函数：
- ❌
width: calc($size + 10px);→ Sass 报错Undefined function calc - ✅
width: calc(#{$size} + 10px);→ 编译为width: calc(24px + 10px); - ⚠️ 注意：
#{}里不能嵌套函数调用（如#{lighten($c, 10%)}可以，但#{unit($c)}不行，返回类型丢失） - ⚠️
/符号在插值中易被 Sass 当作除法：写line-height: #{$ratio} / #{$base}，别写$ratio / $base
真正难的不是语法，是变量生命周期管理
一个 --size 在 :root 设为 16，又被 JS 改成 20，再被某个 calc(var(--size) * 1.5) 读取——这时候你得打开 DevTools 的 Computed 面板，看「custom properties」栏里最终生效的是哪个值，而不是猜它“应该”是多少。SCSS 管不到这一层，它只负责生成初始 CSS 字符串；后续所有变化，都是浏览器的事。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
