SCSS 无法在编译期执行 min()/max()/clamp()，因其仅支持静态计算；这些函数必须由浏览器在运行时解析，SCSS 只能通过 CSS 自定义属性和插值将参数传入 CSS 函数。
SCSS 本身不能直接生成 min() 或 max() 运行时计算逻辑，它只能编译出静态值；真正做动态限制必须靠 CSS 函数在浏览器里运行。
为什么不能在 SCSS 里写 min($a, $b)
SCSS 编译器（Dart Sass）不支持 min()、max()、clamp() 这类函数作为编译期运算符。你写 @function limit-width($w) { @return min($w, 800px); } 会直接报错：SassError: Undefined function min。这些函数只存在于 CSS 解析阶段，不是 SCSS 的语言能力。
常见错误现象：
- 把
min(50%, 800px)写进 SCSS 变量或插值里，比如$width: min(50%, 800px)—— 编译失败 - 试图用
@if $val > 800px做条件判断来“模拟”限制 —— 这只在编译时生效，无法响应视口变化 - 混用单位参与比较，如
min(1rem, 20px)放进 SCSS 表达式 —— 单位未归一化，Sass 不允许跨单位比较
正确路径：SCSS 负责准备参数，CSS 负责运行时计算
你需要把可变部分抽成 CSS 自定义属性，再在规则中用 min()/max()/clamp() 组合使用。SCSS 只干三件事：声明变量、注入 CSS 变量、生成带函数的规则。
典型做法：
- 用 SCSS 变量存设计常量，比如
$max-width: 1200px、$min-font: 16px - 通过
:root或组件级选择器注入为--max-width、--min-font等自定义属性 - 在目标样式中写
width: min(100%, var(--max-width));或font-size: clamp(var(--min-font), 4vw, 2.5rem); - 如果需动态计算比值（如栅格列宽），用
percentage($i / 12)生成静态百分比，但别指望它“响应”——那是minmax()或grid-template-columns的事
示例（安全且可维护）：
:root {
--container-max: #{1200px};
--text-min: #{16px};
}
<p>.container {
width: min(100%, var(--container-max));
}</p><p>h1 {
font-size: clamp(var(--text-min), 4vw, 2.5rem);
}</p>
clamp() 在 SCSS 项目里的实用封装建议
clamp() 需要三个明确参数（最小、首选、最大），而 SCSS 可以帮你避免手输单位混乱或数值反序。虽然不能运行时算，但能保证编译输出合法。
推荐这样封装一个“安全 clamp” mixin：
@mixin clamp-width($min, $pref, $max) {
// 确保单位一致（都 px 或都 rem），否则浏览器可能忽略
width: clamp(#{$min}, #{$pref}, #{$max});
}
<p>.card {
@include clamp-width(300px, 80vw, 960px);
}</p>
注意点：
- 三个参数必须同类型单位（如全带
px，或全用rem），否则某些浏览器会静默失败 - 不要传
calc()表达式进去，比如clamp(100px, calc(50% - 20px), 800px)是合法的，但 SCSS 插值里写#{calc(50% - 20px)}会崩 —— 直接写原生 CSS 更稳 -
clamp()的首选值不是“默认”，而是“理想值”；浏览器会优先满足它，仅当被 min/max 截断时才退让
最易被忽略的一点：所有这些函数（min/max/clamp）都依赖浏览器运行时解析，它们和媒体查询不是互斥关系，而是互补。比如你想「小屏用 max(300px, 100%)，大屏加 padding」，就得同时用 @media 和 max()，而不是幻想 SCSS 循环能替代其中任何一个。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
