less中直接写9会失效，因其解析器将其视为非法转义序列而非css hack，必须用~"10px\9"原样输出才能生效。
Less 本身不支持 IE CSS Hack 的解析，直接写 9 或 *property 会被编译器当作非法语法报错或静默丢弃——必须绕过 Less 编译器的解析阶段才能生效。
为什么 Less 里直接写 9 会失效
Less 编译器（尤其是 v3.0+）把 9 当作未闭合的字符串或非法转义序列处理，不是当作 CSS hack 保留。例如：margin-top: 10px9; 会触发 ParseError 或被剔除，最终生成的 CSS 根本不含该 hack。
- Less 解析器优先按变量、插值、运算规则处理内容，
9不在合法后缀列表中 - 即使加引号写成
"10px9"，输出也是字符串字面量，浏览器无法识别为 hack -
*margin-top同样会被认为是无效属性名，编译时警告并忽略
用 ~"" 插值绕过 Less 解析
Less 提供了「转义字符串」语法 ~"..."，它会让内容原样输出到 CSS，不经过任何解析。这是唯一稳定、无副作用的方案。
- 正确写法：
margin-top: ~"10px9";→ 输出：margin-top: 10px9; - 支持所有 IE hack：
color: ~"#f009";、width: ~"100px /";（IE8+） - 注意：不能写成
~"10px 9"（空格会导致 IE 不识别），结尾反斜杠和数字必须紧连 - 多个 hack 可组合：
display: ~"inline-block9; *display: inline; *zoom: 1";
避免在 mixin 或变量中使用 hack
IE hack 本质是面向特定浏览器的补丁，不具备复用逻辑。强行塞进 mixin 或变量会导致不可预测的输出或编译失败。
- 错误示例：
@ie-margin: ~"10px9"; margin-top: @ie-margin;—— 多数 Less 版本会报错 - 更糟的是：
.clearfix() { *zoom: 19; }——9在 mixin 声明里直接报语法错误 - 正确做法：只在具体选择器下用
~""，且仅用于真正需要兼容的属性 - 如果项目需大量 IE 适配，建议把 hack 样式单独抽成
.ie-hacks.css，用@import (css) "ie-hacks.css";引入
现代项目是否还值得做？
除非明确要求支持 IE9 及以下（比如政务、金融内网系统），否则不建议主动添加 hack。多数构建工具（如 webpack + less-loader）默认启用严格模式，遇到 ~"" 会警告，而真实 IE 用户占比已趋近于零。
真正容易被忽略的点是：哪怕你写了 ~"10px9"，如果构建流程启用了 CSS 压缩（如 cssnano），它可能自动删掉末尾的 9 —— 务必检查最终生成的 CSS 文件是否保留了 hack 字符。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
