滚动条定制需双写WebKit与Firefox规则：::-webkit-scrollbar系列仅WebKit/Blink生效，scrollbar-width/scrollbar-color仅Firefox生效，二者天然互斥，静态双写最稳妥。
直接双写 WebKit 和 Firefox 滚动条规则，别碰 @supports
Less 编译时无法运行时检测浏览器，@supports (selector(::-webkit-scrollbar)) 在所有浏览器中都会被忽略，不是你写错了，是语法根本不被支持。Firefox 完全不解析 ::-webkit-scrollbar 系列伪元素，Chrome/Safari 也完全无视 scrollbar-width 和 scrollbar-color。两套规则天然互斥，静态双写最稳。
-
::-webkit-scrollbar相关规则（如::-webkit-scrollbar-track）只在 WebKit/Blink 内核生效，其他浏览器安全忽略 -
scrollbar-width和scrollbar-color只在 Firefox 生效，其他浏览器同样忽略 - 必须确保目标容器有
overflow: auto或overflow: scroll，否则 Firefox 规则不触发 - 不要把 mixin 绑定到
html或body——它该通用到任意可滚动块，比如.chat-log或.sidebar-nav
mask-image 必须手动双写 -webkit-mask-image + mask-image
Autoprefixer 对 mask-image 的支持极不可靠，尤其在 Less 构建链中。Safari 15.4+ 和 Chrome 53+ 虽已支持标准属性，但 WebKit 渲染管线仍强依赖前缀，且 Less 不会自动补。
-
-webkit-mask-image必须写在mask-image前面，顺序不能反 - 两个声明的路径必须完全一致：同一张 PNG、同一段内联 SVG，不能一个用相对路径、一个用
data:image/svg+xml;utf8,... - 内联 SVG 中必须包含
xmlns="http://www.w3.org/2000/svg"和正确编码，url("data:image/svg+xml;utf8,<svg>...")</svg>少了双引号或utf8，Safari 直接跳过 - Less 不支持变量拼接 URL：
@url: "mask.svg"; mask-image: url(@url);会报错；必须显式传参或硬编码
避免黑盒前缀 mixin，按场景显式开关
像 .vendor-prefix() 这类通用 mixin 是隐患：它会在 Chrome 100+ 里给 display: flex 加上早已废弃的 -ms-、-moz- 前缀，甚至把 gap 这种新属性错误加前缀导致失效。
- 现代项目应交由 PostCSS Autoprefixer 处理常规前缀，Less 层只干预「确实需要手动兜底」的场景
- 对老 IE 的 flex 补丁，单独抽成
.flex-legacy()，并注释清楚仅用于target: "IE 11" - 对
clip-path这类支持度碎的属性，用@supports (clip-path: polygon(0 0))包裹标准写法，降级版本放外面，不塞进 mixin - 禁用硬编码版本号，改用配置变量如
@ie11-support: true，统一在variables.less里开关
用插值 ~'' 正确输出 CSS 自定义属性
Less 会把 --primary-color 当作未定义变量报错，因为它试图解析 @--primary-color。你真正需要的是让 Less 原样输出这个字符串，交给浏览器运行时解析。
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
color: --primary-color;→ 报错variable @--primary-color is undefined - 正确写法：
color: ~'--primary-color';→ 输出color: --primary-color; - 封装时用
@{prop}: ~"var(--@{var-name}, @{fallback})";，注意@{var-name}必须带插值，否则拼不出真实变量名 - 不能在
var()里做计算：lighten(~'--bg', 10%)会编译失败——~'--bg'是字符串，不是颜色值
