Sass 中无法在编译时判断浏览器类型,@if $browser == 'ie6' 无效;应通过预设变量(如 $ie-version: 9)和开关($enable-ie-hacks: true)控制 IE hack 输出。

Sass 中不能直接用 @if 判断浏览器类型
你写 @if $browser == 'ie6' 是无效的——Sass 编译时根本不知道运行环境是哪个浏览器,它只做静态编译,不接触 DOM 或 UA 字符串。所有“在 Sass 里判断浏览器并输出 hack”的想法,本质是混淆了编译时和运行时。真正能起作用的只有两类:预设目标版本(如 $target-ie: 8),或靠开发者手动传入标识。
用变量 + 混合宏封装 IE 版本专属 hack
最稳妥的做法是把 hack 当作“可选开关”,由项目配置决定是否启用,而不是自动探测:
-
$enable-ie-hacks: true控制整体开关,避免无意义输出 - 定义
$ie-version: 9明确目标最低 IE 版本(比如只兼容 IE9+,就不用输出_width) - 用
@mixin ie-hack封装常用属性前缀,例如:@mixin ie-hack($prop, $value, $version: 6) { #{$prop}: $value; @if $enable-ie-hacks and $version == 6 { _#{$prop}: $value; } @if $enable-ie-hacks and $version >= 6 and $version <= 9 { #{$prop}: $value\9; } }
选择器级 hack 必须靠 HTML 类名配合
Sass 无法生成 *html .box 这类 hack,因为 *html 是 IE6 识别的选择器,不是合法 CSS;但你可以用类名替代:
- 在 HTML 中根据 UA 注入 class,如
(服务端或 JS 注入) - Sass 中写
.ie6 .box { width: 200px; }—— 这种写法清晰、可维护、无解析风险 - 拒绝用
*+html .box等已失效的 hack:IE7 已停止支持,现代构建工具(如 Autoprefixer)默认不处理这类规则
真正该放弃的 hack 场景
现在还硬塞 \9 或 _ 前缀,大概率是在维护老系统。要注意:
立即学习“前端免费学习笔记(深入)”;
- Autoprefixer 不处理这些 hack,必须手动写进 SCSS,且不会校验语法合法性
- 如果用了 PostCSS 插件(如
postcss-css-hack),它只是字符串替换,不理解语义,容易误伤正常\转义 - IE11 及以下已全量退出主流支持,Windows 10/11 默认 Edge 不再识别条件注释或
*html - 唯一还可能遇到真实需求的场景:内网系统强制要求兼容 IE8,且无法升级内核——这时才需要保留带
$ie-version: 8的混合宏
hack 的本质是补丁,不是功能。Sass 能帮你管住补丁的开关和位置,但没法替你决定要不要打这个补丁。


















