<p>SCSS中需用插值语法#{$variable}</code>将变量注入calc()，如<code>calc(100% - #{$gap})；必须确保变量带单位、空格规范，且Sass编译期运算与CSS运行时calc()不可混用。</p>
SCSS里怎么让calc()和变量一起用？
直接写 calc(--gap * 2) 会静默失效，浏览器根本不认——calc() 只接受 var(--gap) 这种显式调用，裸变量名会被整个规则跳过。
必须满足三个硬条件：变量用 var(--name) 包裹；乘除至少一个操作数无单位（比如 var(--gap) 是 20px，那 2 就不能带 px）；加减两侧单位严格一致（1rem + 20px 在 IE11 和旧安卓 WebView 里整条规则丢弃）。
-
calc(var(--gap) * 2)✅ 正确，前提是--gap值带单位（如20px） -
calc(var(--gap) * var(--scale))⚠️ 风险高，--scale必须是纯数字（1.5），否则单位冲突（20px * 1.2px） - 嵌套
calc(calc())在 Safari 15.4 之前完全不支持，旧版 iOS 和部分 WebView 会直接忽略整条声明
Sass变量能不能塞进calc()？
不能。Sass 变量（$gap: 20px）在编译期就消失了，calc() 是运行时计算，它根本看不到 Sass 层的东西。
想用 Sass 做运算再喂给 calc()，得手动拼字符串：
立即学习“前端免费学习笔记（深入）”；
Miller (mlr) 是一个命令行工具，用于查询、整形和重新格式化名称索引数据，如 CSV、TSV、JSON 和 JSON Lines。它将 awk、sed、cut、join 和 sort 的功能整合到一个专为结构化数据处理而构建的单一工具中。
$gap: 20px;
.full-width { width: calc(100% - #{$gap}); }注意空格：#{$gap} 前后必须有空格，否则输出 calc(100%-20px) —— 这是非法语法，浏览器报 Invalid property value。
-
$gap: 16（无单位）和$gap: 16px（带单位）行为不同：#{$gap} * 2若没单位，结果是纯数字，塞进calc()就成非法表达式 - 如果要动态缩放 + 偏移，拆成三个原子 CSS 变量：
--unit（带单位）、--scale（纯数字）、--offset（同单位），组合写为calc(var(--unit) * var(--scale) + var(--offset))
PostCSS怎么兜底calc()里的CSS变量？
PostCSS 不是万能的，它对 calc() 的处理依赖插件顺序和配置。最常踩的坑是：没设 preserve: false，导致 postcss-calc 不展开表达式，postcss-custom-properties 替换完变量后，calc(var(--gap) * 2) 还原样留在 CSS 里，运行时才求值——这等于没兜底。
- 必须严格按顺序：先
postcss-custom-properties替换变量，再postcss-calc（配preserve: false）展开计算 - 顺序颠倒或漏掉
preserve: false，构建产物里还是带var()的calc()，老浏览器照样跪 -
@supports (calc: expression)无法精准检测calc()兼容性，IE11 会假装支持但实际不执行，真要兼容就得在构建阶段把能算死的部分提前编译掉
为什么mixins里用darken()却编译失败？
darken($color, 10%) 这类函数只在 Sass 编译期生效，它要求输入是 Sass 颜色类型（#007bff 或 rgb(0, 123, 255)），不是字符串或 CSS 变量。
- 传入
var(--primary-color)会报错：Function darken only works with colors - 传入字符串
"#007bff"也不行，Sass 不自动解析字符串为颜色对象 - 正确做法是：所有主题色用 Sass 变量定义（
$primary-color: #007bff），在 mixin 里直接操作；CSS 变量只用于运行时可变部分（比如用户切换主题时动态改--primary-color）
混用 Sass 编译期逻辑和 CSS 运行时变量，最容易卡在单位、类型和作用域这三关——不是语法错，而是机制错位。
