SCSS的@if仅支持编译期单路径条件输出，无法生成多浏览器兼容CSS；应使用@mixin封装加autoprefixer自动补前缀，或通过$targets map配合@each实现多目标构建。
SCSS中@if不能直接生成不同浏览器的CSS输出
SCSS的 @if 是编译期逻辑，它决定“要不要生成某段CSS”，但无法让同一段样式在编译后同时输出多套带不同前缀或语法的规则。比如你写 @if $browser == 'chrome' { display: flex; }，最终只产出 Chrome 对应的那一份，其他浏览器的规则压根不会存在——这不是“多目标输出”，而是“单路径编译”。
真正需要的是 @mixin + 参数化 + 调用时分支
要为不同浏览器输出差异代码（比如 display: flex 带 -webkit- 前缀、IE10 用 display: -ms-flexbox），得靠 @mixin 封装逻辑，再配合参数控制行为：
-
@mixin flex($direction: row, $wrap: nowrap)内部用@if判断是否启用旧版前缀支持 - 通过布尔参数（如
$legacy: true）触发多行输出，而不是靠浏览器 UA 字符串判断 - 不依赖运行时 UA，因为 SCSS 不知道最终跑在哪种浏览器上——它只管编译出兼容性 CSS
示例：
@mixin flex($legacy: true) {
@if $legacy {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
} @else {
display: flex;
}
}
autoprefixer 才是现代方案，别手动 if 浏览器
手写 @if $browser == 'safari' 这类逻辑不仅不可靠（SCSS 没有 UA 上下文），还会让维护成本飙升。真实项目中应该：
立即学习“前端免费学习笔记（深入）”；
- 写标准 CSS（如
display: flex、gap: 8px） - 用
autoprefixer在构建时自动补全前缀，配置目标浏览器范围（如"supports": ["> 1%", "last 2 versions"]） - 把
@if留给真正需要编译期决策的场景：比如按主题开关整套暗色模式变量、按环境启用调试边框等
如果硬要模拟“按浏览器输出”，只能靠 map + each + 变量驱动
极少数定制构建流程中，可能需为不同渠道打包不同 CSS 包。这时可借助 $targets: ('chrome': true, 'firefox': false) 这类 map，配合 @each 和条件输出，但注意：
- 所有分支必须在编译前确定，不能动态读取请求头
- 每个
@each项会生成独立 CSS 规则块，容易造成冗余（比如重复声明同一选择器） - 更推荐拆成多个 SCSS 入口文件（
app.chrome.scss/app.firefox.scss），各自@import公共模块 + 启用对应$config
复杂点在于：你得自己维护浏览器能力映射表，而 autoprefixer 已经做了这件事——而且更准。
