SCSS支持+、-、*、/单位运算，但要求单位兼容；除法需括号避免解析错误；calc()中须用#{$var}插值；复杂逻辑应封装@function；结果精度默认5位小数，可用round()控制。
SCSS里直接用 +、-、*、/ 做单位计算是可行的，但必须单位兼容
SCSS支持原生算术运算符，但不是所有单位组合都能相加或相除。比如 10px + 5em 会报错 Incompatible units: 'px' and 'em'，因为单位不可通约。只有相同单位（px + px）、无单位数与带单位数（2 * 16px），或能自动归一化的单位（如 1in / 96 → 1px）才被允许。
常见安全用法：
-
margin: 10px + 5px→15px -
width: 100% / 3→33.33333%（注意除法在CSS输出中默认保留小数） -
font-size: 1rem * 1.25→1.25rem -
line-height: 20px / 16px→1.25（纯数值，无单位）
除法 / 在SCSS中容易被误解析为CSS注释或分隔符
SCSS会把孤立的 / 当作普通CSS分隔符（比如 font: 16px/24px Arial 中的斜杠），而不是运算符。所以 100% / 3 如果不加括号或上下文约束，可能不触发计算。
解决办法只有三种：
立即学习“前端免费学习笔记（深入）”；
- 用括号包裹：
width: (100% / 3) - 参与其他运算：
width: 100% / 3 + 0 - 赋值给变量再使用：
$col-width: 100% / 3; width: $col-width
不加括号写成 width: 100% / 3 在较新版本 Sass（Dart Sass）中已警告弃用，旧版 Ruby Sass 可能静默失败。
用 calc() 混合 SCSS 运算时，注意编译时机和括号嵌套
SCSS 运算发生在编译期，calc() 是运行时浏览器计算。想让 SCSS 先算一部分、再交给 calc() 算另一部分，得手动拆解，且必须保证括号层级清晰。
例如实现「容器宽减去固定侧边栏」：
// ✅ 正确：SCSS 计算固定值，嵌入 calc()
$sidebar-width: 240px;
main { width: calc(100% - #{$sidebar-width}); }
<p>// ❌ 错误：试图在 calc() 内部用 SCSS 运算符（无效）
main { width: calc(100% - $sidebar-width); }
关键点：#{$variable} 是插值语法，只做字符串替换；calc() 里的内容不会被 SCSS 再次解析。所以 100% - #{$sidebar-width} 编译后就是 calc(100% - 240px)，而 calc(100% - $sidebar-width) 会原样输出，浏览器报错。
自定义函数比重复写算式更可靠，尤其涉及响应式比例或颜色混合
当运算逻辑变复杂（比如根据断点动态算栅格 margin、按亮度调整文字对比度），硬写 12px * (768px / 375px) 不仅难读，还容易漏括号或单位错位。这时候封装 @function 是更稳的选择。
示例：一个安全的响应式缩放函数：
@function responsive-size($base, $breakpoint: 768px) {
@return $base * ($breakpoint / 375px);
}
<p>h1 { font-size: responsive-size(24px); } // 输出 48.768px
注意点：
- 函数内所有单位必须可运算，
$breakpoint / 375px返回纯数字，再乘$base才能保留单位 - 不要在函数里拼接
calc()字符串——那属于 hack，破坏类型安全 - 如果需返回
calc()表达式，应明确用@return calc(...)+ 插值，而非期望函数自动转义
真正容易被忽略的是：SCSS 运算结果精度默认 5 位小数，但 CSS 引擎对小数位敏感（尤其 transform: translateX(0.33333px) 可能触发亚像素渲染抖动）。需要时用 round() 或 floor() 主动截断。
