Less中rgba()直接透传不处理，fade()在100%透明时输出transparent，hsla()同样透传不转换，推荐变量中直接使用rgba()字面量以确保渲染一致性和可维护性。
Less里写rgba()会被直接透传，不是问题
Less本身不处理颜色透明度逻辑，rgba(0, 0, 0, 0.5)这类写法会原样输出到CSS中，浏览器照常解析。你不需要额外“编译透明色”——只要语法合法，Less就认。
常见误操作是试图用fade()或transparentize()处理已带alpha的rgba()值，结果叠了两层透明，视觉变淡却不自知。
-
fade(#000, 50)→ 输出rgba(0, 0, 0, 0.5) -
transparentize(#000, 0.3)→ 输出rgba(0, 0, 0, 0.7)（注意：参数是“保留多少不透明”，不是“加多少透明”） - 直接写
background: rgba(0, 0, 0, 0.5);→ Less不改动，原样输出
为什么fade(#fff, 100)编译成transparent而不是rgba(255,255,255,0)
Less内置函数fade()做了语义优化：当透明度为100%时，它认为你想要完全透明，于是直接输出transparent关键字——这是合法CSS值，且在所有浏览器中表现一致，比rgba(255,255,255,0)更简洁、更可靠。
但要注意：transparent在IE8及更早版本中不支持background以外的属性（比如border-color: transparent在IE8是OK的，但color: transparent不行）。如果要兼容老IE，得手动写rgba()并确保alpha > 0。
立即学习“前端免费学习笔记（深入）”；
hsla()在Less里能用，但别指望它自动转成rgba()
Less不会把hsla(0, 0%, 0%, 0.5)转成rgba()，也不会做色彩空间转换。它只做字符串透传。所以你在Less里写hsla()，最终CSS里就是hsla()。
这本身没问题，但要注意两点：
- IE9+才支持
hsla()，IE8及以下会直接忽略整条声明 - 某些CSS压缩工具（如clean-css）默认不压缩
hsla()，但可能把rgba()简写成十六进制（如果alpha=1），造成行为差异
Less变量里存透明色，推荐用rgba()字面量而非函数调用
如果你定义一个可复用的半透黑色：
@overlay-black: rgba(0, 0, 0, 0.6);
比下面这种更可控：
@overlay-base: #000; @overlay-alpha: 0.6; @overlay-black: fade(@overlay-base, (1 - @overlay-alpha) * 100);
后者看似灵活，但一旦@overlay-alpha变成0.99，fade()算出的1%不透明度，在部分Android WebView里渲染偏灰；而rgba()字面量行为确定，调试时一眼看清数值。
真正需要动态计算的场景（比如主题色叠加遮罩），再用fade()或transparentize()，其余时候——直写rgba()最省心。
容易被忽略的是：Less变量作用域和嵌套规则会影响透明色继承。比如在&:hover里重定义@overlay-black，外层样式不会自动更新。这种动态覆盖极少必要，多数情况反而导致维护混乱。
