math.div()报错“Function not found”需先@use "sass:math"显式导入，调用时必须带命名空间math.div($a, $b)；参数单位须一致，不兼容单位直接报错；calc()内/无需改动，属CSS原生解析。

math.div()报错“Function not found”怎么办

不是你装错了 Sass，是 Dart Sass 1.33+ 默认禁用全局数学函数——math.div 必须显式导入才能用。不加 @use "sass:math"，它就不存在。

• 在使用 math.div 的 SCSS 文件顶部第一行加：@use "sass:math";
• 调用时必须带命名空间：math.div($a, $b)，不能简写成 div($a, $b)
• 如果多个文件都要用，统一在主入口（如 _index.scss）里 @use "sass:math" as math;，子文件通过 @use 继承即可，不用重复写

math.div()参数单位不一致就直接报错

它不自动换算单位，只做纯数值除法。单位不匹配不是警告，是编译失败。

• math.div(100px, 3) ✅ 返回 33.33333px
• math.div(16px, 1rem) ❌ 报错：Units px and rem are incompatible
• math.div(1rem, 2) ❌ 若 1rem 来自变量且未显式声明单位（比如 $size: 1），结果可能静默失效；应先转为像素或统一无单位：math.div(16, 2)

calc()里的/不用改，但别和Sass层混淆

calc() 是 CSS 原生函数，里面的 / 由浏览器运行时解析，Dart Sass 2.0+ 完全放行——这是唯一能安全保留 / 的地方。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• width: calc(100% / 3); ✅ 正确，无需改动
• width: math.div(100%, 3); ❌ 错误：百分比参与运算后仍是百分比，但无法直接用于 calc 外的属性值（如 font 或 grid-template-columns）
• 常见陷阱：把 grid-template-columns: repeat(3, 1fr / 3); 里的 / 当成除法——其实它是 CSS 分隔符，不是运算，不能替换成 math.div；这种写法本身就不合法，应改为 repeat(3, 1fr) 或用 minmax()

Vite 或 Vue 项目里迁移容易漏掉的点

不是改完 / 就完事。工具链和上下文解析规则变了，漏改一处就卡住编译。

立即学习“前端免费学习笔记（深入）”；

• Vue 2 中 ::v-deep .foo 必须带空格，写成 ::v-deep.foo 会报 Unknown pseudo-class selector
• Vite 的 additionalData 配置里不能混用 @import 和 @use，否则整个 Sass 解析失败；必须统一为 @use "@/styles/vars.scss" as *;（注意末尾分号）
• uni-app 目前主流仍卡在 sass@1.77.8，强行升到 2.x 会触发构建中断；若必须升级，得同步确认其 CLI 是否已适配模块系统

真正难的不是写对 math.div，而是意识到：Dart Sass 不再帮你判断哪边是运算、哪边是 CSS 分隔符——它把歧义砍掉了，代价是你得自己厘清每一处 / 的语义归属。