Sass 中 min()/max() 不能直接使用，需用 #{} 插值透传为 CSS 字符串；CSS 运行时才计算，Sass 仅输出；单位需一致，优先用 clamp()，注意浏览器兼容性与 Grid 中的特殊语法。
min() 和 max() 在 Sass 中根本不能直接用
因为 Sass 编译时（编译成 CSS 之前）不解析 min() 或 max()，它只把它们当普通字符串原样输出。浏览器运行时才计算，但这时 Sass 已经退出了——所以你写的 @function min($a, $b) { ... } 不会覆盖或干预 CSS 原生的 min() 函数。
真正起作用的是 CSS 运行时的 min() 和 max()，Sass 只负责把它们“安全地写进最终 CSS”，不参与计算。这意味着：
- 不能在
@if或calc()外部做条件判断（比如@if min(1rem, 2em) == 1rem是错的） - 不能用 Sass 变量直接塞进
min()当参数（min($spacing-sm, 1.5rem)会报错，必须先转成字符串拼接或靠#{}插值） - Sass 3.5+ 支持
min()/max()作为纯函数用于数值计算，但仅限单位一致的数字（如min(16px, 24px)），不能混rem和em
怎么让 min/max 真正生效于响应式间距
核心是把它们用在支持容器查询或视口单位的上下文中，而不是当成“设个上限”就完事。常见失效场景是：在固定宽度容器里对 padding 写 min(2rem, 5vw)，结果小屏下 5vw 太小，视觉上反而缩没了。
实操要点：
立即学习“前端免费学习笔记（深入）”；
- 优先用
clamp()替代单独min()/max()：它天然带范围约束，比如padding-inline: clamp(1rem, 4vw, 2.5rem)比min(max(1rem, 4vw), 2.5rem)更直观、更易维护 - 避免在
margin上滥用min()：浏览器对负外边距 +min()的解析不稳定，某些版本 Chrome 会忽略整个声明 - 如果必须用
min()控制尺寸极限，确保至少一个参数是相对单位（vw,vh,rem），否则退化为静态值，失去响应意义
兼容性陷阱：哪些浏览器根本不认 min/max
min()、max()、clamp() 都属于 CSS Values and Units Level 4，IE 全系不支持，Firefox 79+ 才完整支持 clamp()，iOS Safari 13.4+ 开始支持 min()/max()，但早期版本对嵌套函数（如 min(calc(100% - 2rem), 400px)）会解析失败。
上线前必须验证的点：
- 用
@supports (width: min(0px, 0px))包裹关键样式，给老浏览器降级方案 - 不要在
@keyframes里用min()，部分 Android WebView 会直接跳过该帧 - PostCSS 插件如
postcss-clamp只能转clamp()，对min()/max()无 polyfill 能力——别指望自动补丁
Sass 如何安全输出 min/max 表达式
关键是不让 Sass 尝试解析，而是把它当字面量透传。错误写法：width: min($base-width, 100vw)（Sass 会报 Function min doesn't exist）；正确做法是用插值或字符串拼接。
推荐方式：
- 用
#{}插值最稳妥：padding: #{"min(1rem, 4vw)"}; - 封装成 mixin 避免重复：
@mixin responsive-pad($min, $max) { padding: #{'min(' + $min + ', ' + $max + ')'}; } - 若需动态计算（如基于断点推导），改用
calc()组合：width: calc(#{$breakpoint-md} - 1rem);比硬套min()更可控
最常被忽略的一点：这些函数在 CSS Grid 的 grid-template-columns 里行为特殊——minmax(min(), max()) 和顶层 min() 不是同一机制，别混用。写错一个括号，整行列定义就静默失效。
