SCSS不支持log()、pow()等函数，仅支持基础运算符；必须用CSS运行时函数（如calc(pow())）或JavaScript计算后注入CSS变量。
SCSS 本身不支持 log()、pow() 等数学函数
SCSS 编译器（Dart Sass）原生只支持 +、-、*、/ 和 % 这些基础运算符，log()、pow()、sqrt() 等函数在 SCSS 层面根本不存在。你写 log(2) 或 pow(2, 3) 会直接报错：SassError: Undefined function.
这些函数是纯 CSS 运行时函数，只在浏览器解析 CSS 时生效，SCSS 编译阶段完全看不见它们。
- 想用
log()或pow()，必须写在 CSS 层（即calc()或其他 CSS 函数内），不能出现在 SCSS 表达式中 - SCSS 变量如
$base: 16可以参与*、/运算，但无法调用log($base) - 若硬要“模拟”，只能靠自定义
@function做近似计算（如泰勒展开），但精度低、维护难，不推荐
负指数缩放必须交给 calc() 在运行时处理
比如你想让某个尺寸按 2^(-x) 衰减（类似淡出衰减曲线），不能写成 SCSS 的 2 ** (-$x)（语法错误），也不能写 pow(2, -$x)（函数不存在）。
正确路径是：把底数和指数都作为 CSS 自定义属性传入，再用 calc() + pow() 组合：
立即学习“前端免费学习笔记（深入）”；
/* ✅ 正确：CSS 层运行时计算 */
:root {
--base: 2;
--exp: -0.5;
}
.element {
width: calc(pow(var(--base), var(--exp)) * 1px);
}注意几点：
-
--base和--exp必须是纯数字（无单位），否则pow()会失败 -
pow()返回无单位数值，需手动补单位（如* 1px）才能用于width等带单位属性 - IE 完全不支持
pow()，且目前仅 Chromium 和 Safari 技术预览版稳定支持；Firefox 尚未实现
transform 中的负值缩放与 scale() 无关
scale(-1) 是翻转，不是“负指数”。它和 log()、pow() 没有数学关系，只是坐标系反射变换。
如果你误以为 scale(-2) 表示“负二次方”，那是概念混淆：scale(-2) = 水平翻转 + 放大 2 倍，等价于 scale(2) translateX(-100%)，不是 2⁻² = 0.25。
真正需要负指数行为（如随距离衰减的尺寸），必须走 calc(pow(...)) 路线，或退而求其次，在 JS 中计算后注入 CSS 变量。
容易被忽略的兼容性断层
最常被跳过的事实是：SCSS 编译期和 CSS 运行时之间存在不可逾越的鸿沟。你在 SCSS 里写的任何东西，只要不是标准运算符或内置函数，都不会变成 CSS 输出——包括你从 MDN 复制粘贴的 log() 示例，如果直接塞进 SCSS 文件，只会导致编译失败或静默丢弃。
真正能落地的方案只有两条路：
- 纯 CSS 方案：所有计算逻辑写在
calc()/pow()/clamp()里，变量用--xxx管理，SCSS 只做字符串拼接（#{}）或结构组织 - JS 辅助方案：用 JS 读取配置、执行
Math.log()、Math.pow()，再设置style.setProperty('--computed', result)
试图在 SCSS 里“提前算好”对数或幂的结果，不仅做不到，还会掩盖真实运行环境的限制。
