less编译器不处理兼容性，仅原样输出现代css特性如var(--x)、gap、grid等；需依赖postcss插件链（如autoprefixer、postcss-custom-properties）在编译后降级，并确保构建顺序正确、配置生效。
Less 编译器本身不处理 CSS 预定义（比如 var(--x)、gap、aspect-ratio）的兼容性，它只做语法转换；所谓“兼容性问题”，其实是你把现代 CSS 特性直接写进 .less 文件，又没在构建链路中做降级，导致旧浏览器加载了无法识别的声明。
Less 会原样输出 var(--x) 吗？
会，而且这是默认行为。Less 不解析 CSS 自定义属性，也不替换它们——它只认自己的变量语法 @primary-color。如果你写了 color: var(--text-color);，Less 编译后还是 color: var(--text-color);，IE 和旧版 Safari 直接忽略整条规则。
- 正确做法：用 Less 变量替代，例如
@text-color: #333;，然后写color: @text-color; - 错误做法：混用
var(--x)和 Less 变量，指望编译器自动桥接——它不会 - 注意：PostCSS 的
postcss-custom-properties插件可以降级var()，但必须明确启用，且只对纯 CSS 有效；Less 输出后才进入 PostCSS 流程
为什么 display: grid 在 IE11 里不生效？
因为 Less 不会把 display: grid 转成 display: -ms-grid，autoprefixer 也不会——它只补前缀，不改语法。IE10–11 的 Grid 是一套完全不同的旧规范，需要手动写 -ms-grid-columns、-ms-grid-rows 等专用属性。
- 不要依赖 autoprefixer 生成 IE Grid 代码，它根本不会做这事
- 如果项目必须支持 IE11，要么放弃
display: grid，改用display: flex+float降级布局 - 要么封装一个 Mixin，例如
.ie-grid() { display: -ms-grid; -ms-grid-columns: 1fr 1fr; }，并在需要处显式调用
autoprefixer 在 Less 构建链里为什么没起作用？
常见原因是加载顺序错了：postcss-loader 必须紧接在 less-loader 之后，否则它处理的是原始 .less 源码（无效），而不是编译后的 CSS 字符串。
- 错误配置：
less-loader → postcss-loader → css-loader（postcss-loader 收到的是未编译的 Less 文本） - 正确顺序：
less-loader → postcss-loader → css-loader - 检查
postcss-loader的options.postcssOptions.plugins是否显式包含'autoprefixer' -
browserslist配置必须匹配实际目标，例如"IE >= 11"缺失，autoprefixer 就不会输出-ms-前缀
真正容易被忽略的点是：Less 编译和兼容性修复是两个阶段的事，前者负责变量/嵌套/Mixin 展开，后者靠 PostCSS 插件链完成；把两者职责混在一起，比如手写 -webkit-flex 或删掉 gap 改用 margin，反而会让构建流程失控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
