less编译本身不产生锯齿，它只做语法转换；移动端渲染锯齿的根源是输出了现代css语法（如gap、var(--x)、linear-gradient）或未触发gpu合成层，导致webkit内核走低精度cpu渲染路径。
Less 编译本身不产生锯齿，它只做语法转换；移动端渲染锯齿的根源是输出了现代 CSS 语法（如 gap、var(--x)、linear-gradient）或未触发 GPU 合成层，导致 WebKit 内核（Safari / iOS WebView）走低精度 CPU 渲染路径。修复关键不是改 Less 写法，而是切断手动干预、分层处理降级与升层。
为什么删掉手写前缀反而能减少锯齿
常见现象：Chrome DevTools 里看到 display: -webkit-flex、display: -ms-flexbox、display: flex 并存，后两条被划掉；Safari 控制台报 Unknown property 'gap'——这不是样式没生效，是前缀逻辑失控引发的渲染链路混乱。
-
gap、place-items、aspect-ratio等属性本就不该加前缀，强行添加会让 Safari 忽略整条声明，甚至触发怪异模式 - Less Mixin 如
.flex-center() { display: -webkit-flex; }会无差别输出，现代浏览器加载冗余规则，GPU 渲染通道被干扰，间接加剧渐变/动画锯齿 - Autoprefixer 只在 Less → CSS 之后生效，且必须按
browserslist配置严格补前缀；它不处理gap或var()，也不降级语法
IE11 和低端 Android 必须手动降级的语法项
Autoprefixer 不会把 display: grid 转成 display: -ms-grid，也不会把 gap: 1rem 替换为 margin。这些必须在 Less 层面主动规避或替换：
-
var(--color)全系 IE 不支持 → 改用 Less 变量：@primary: #007bff;，编译后直接输出值 -
gap在 Flex/Grid 中无效 → 封装为.grid-gap(@size) { margin-left: -@size; > * { margin-left: @size; } } -
display: grid在 IE10–11 只认display: -ms-grid→ 单独写@supports not (display: grid) { ... }块，内部用-ms-grid-columns等专用属性 - 渐变背景 + 动画时锯齿更明显 → 把
background: linear-gradient()移到::before伪元素，并加transform: translateZ(0)和will-change: transform
移动端强制 GPU 合成层的最小有效组合
仅加 will-change: transform 或仅加 transform: rotate(1deg) 都无效，甚至加重 sub-pixel 插值误差。真正起效的是：
- 同一 CSS 规则中必须同时存在：
transform: [your-value] translateZ(0)+will-change: transform - 伪元素（如
::before）也要单独设置这两项，父容器设了不等于子元素继承 - 避免
border-radius和overflow: hidden同时作用于带阴影/渐变的容器，否则 iOS 会裁剪合成层边缘，表现为色带或白边撕裂 - 渐变色标之间至少留
0.5%过渡区间，例如：#ff9a9e 49.5%, #fad0c4 50.5%；禁用rgba()，改用十六进制色值
最易被忽略的一点：Less 输出的 CSS 是否进入合成层，和你写的变量、Mixin 没有直接关系；它取决于构建链路是否完整（less-loader → postcss-loader → autoprefixer）、browserslist 是否匹配真实目标、以及最终 DOM 结构是否触发了 WebKit 的亚像素渲染陷阱。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
