SCSS本身不破坏var()，问题出在后续压缩工具错误解析；必须选用支持CSS变量的工具（如配置禁用mergeLonghand和discardUnused的cssnano），避免使用已知不兼容的旧版minifier。
直接结论：SCSS 本身不处理 var() 值的破坏，问题出在后续压缩工具（如 clean-css、旧版 cssnano 或 Laravel 自带的 PHP minifier）错误解析或丢弃 var(--x) 语法。关键不是“关掉压缩”，而是选对工具并禁用特定压缩规则。
为什么 var() 值会被删或变形？
常见现象包括：color: var(--primary); 变成 color: ;，或 margin: var(--space-md) 0; 被简化为 margin: 0;，甚至整个声明块消失。
根本原因不是 SCSS 编译，而是压缩器把 var() 当作无效函数或未识别语法，尤其当它：
- 启用
mergeLonghand（如 cssnano 默认开启），把margin-top: var(--space-sm); margin-right: 0;错误合并为margin: var(--space-sm) 0 0 0;，再因解析失败清空 - 启用
discardUnused，误判:root中定义的--xxx为“未使用”而删掉整段 - 使用已废弃的
clean-css@3.x或matthiasmullie/minify@1.x，它们压根不支持 CSS Custom Properties
用 cssnano 时必须关掉这两个选项
如果你走的是 Sass → PostCSS → cssnano 流程（推荐），cssnano 是目前最稳妥的选择，但默认配置会破坏 var()。
立即学习“前端免费学习笔记（深入）”；
必须显式禁用：
-
mergeLonghand: false—— 避免把含var()的单属性强行合并成简写形式 -
discardUnused: false—— 确保:root { --color: red; }不被当作死代码删掉
示例配置（postcss.config.js）：
module.exports = {
plugins: [
require('cssnano')({
preset: ['default', {
mergeLonghand: false,
discardUnused: false,
}],
}),
],
};Laravel 项目里慎用 matthiasmullie/minify
虽然文档说“支持 CSS 变量”，但实际测试中，matthiasmullie/minify@1.3.7（当前最新）仍会把 var(--x) 解析为空值，尤其在嵌套或 calc() 混用场景下（如 width: calc(100% - var(--gap));）。
替代方案更可靠：
- 前端构建阶段用
postcss+cssnano处理，Laravel 只负责加载已压缩好的.min.css - 若必须后端压缩，改用
spatie/css-minifier（基于现代 CSS parser，明确声明兼容var()和@layer） - 完全避开 PHP 压缩，让 Nginx 或 Cloudflare 在传输层做 Gzip/Brotli，更安全
SCSS 层也要防一手：别在 @include 里动态拼 var()
这不是压缩问题，但会放大风险。例如：
@mixin set-color($prop, $var) {
#{$prop}: var(#{$var});
}
@include set-color(color, '--text-primary');这种写法会让压缩器更难静态分析 var() 是否有效，部分工具直接跳过整条声明。
更稳妥写法是直接写死属性名+变量名：
.btn {
color: var(--text-primary);
}或者用 @use 引入变量文件后，用 meta.load-css 控制注入时机，避免运行时插值干扰压缩流程。
真正容易被忽略的点：即使你用了 cssnano 并关了 mergeLonghand，如果 SCSS 编译输出时用了 outputStyle: 'compressed'，某些老版本 sass（如 Dart Sass var(--x) 里的空格删掉（var(--x) → var(--x) 没问题，但 var( --x ) → var(--x) 可能触发解析异常）。所以建议开发期用 expanded，压缩交给 postcss，别让两道压缩叠在一起。
