SCSS @if 不能动态生成浏览器前缀，应交由 Autoprefixer 等后处理器处理；它适用于编译时已知变量的样式逻辑分支，如按主题切换颜色、边框等整套规则。
SCSS @if 不能直接生成不同浏览器前缀
SCSS 的 @if 是编译时逻辑，它能根据变量值分支生成不同 CSS 规则，但**无法动态决定是否加 -webkit-、-moz- 这类前缀**——那些前缀由 Autoprefixer 等后处理器负责，不是 SCSS 该管的。硬用 @if 拼接前缀，既难维护，又和现代工具链冲突。
真正该用 @if 的场景：按参数切换整套样式逻辑
比如你有一个 $theme 变量，想在 dark 模式下用深色背景、light 模式下用浅色背景，这时 @if 才是正解：
@mixin button-style($theme: light) {
background-color: if($theme == dark, #333, #fff);
color: if($theme == dark, #fff, #333);
@if $theme == dark {
border: 1px solid #555;
} @else {
border: 1px solid #ccc;
}
}
.btn {
@include button-style(dark);
}
-
if()函数适合单值判断（返回一个值），@if块适合多行逻辑或嵌套规则 - 变量必须在编译前已知（不能是运行时 JS 控制的值）
- 不要试图用
@if $browser == webkit—— SCSS 根本没有浏览器检测能力
需要条件性加前缀？交给 Autoprefixer，不是 SCSS
如果你发现某些属性（如 display: flex、backdrop-filter）需要兼容老版本 Safari 或 Firefox，正确做法是：
- 写标准语法：
display: flex，不手动加-webkit- - 配置
autoprefixer（例如在 PostCSS 中）指定目标浏览器："last 2 versions, iOS >= 12" - 构建时自动注入所需前缀，且只加真正需要的，不会冗余
- 若某属性始终不被 Autoprefixer 处理（如实验性
color-mix()），说明它尚未进入标准草案，此时手动加前缀也大概率无效
容易踩的坑：用字符串拼接伪造前缀
有人会这么写：
立即学习“前端免费学习笔记（深入）”；
@mixin prefixed-transform($val, $vendor: webkit) {
@if $vendor == webkit {
-webkit-transform: $val;
}
transform: $val;
}
这看似“条件加前缀”，实际问题很多：
- 每次调用都要传
$vendor，极易漏传或传错 - 无法覆盖多前缀组合（如
-webkit-+-ms-同时需要） - Autoprefixer 会把
transform: $val行也加前缀，导致重复输出 - 未来删掉旧浏览器支持时，得全局搜
@mixin prefixed-并逐个改，而不是改一行配置
复杂点在于：前缀不是样式逻辑的一部分，而是构建流程的兼容层。把它塞进 SCSS，等于把工程问题当成了语言问题来解。
