fade()是less内置函数，对任意合法颜色值整体设置目标透明度（0–100整数），覆盖原alpha；rgba()是css原生函数，需显式rgb分量与小数alpha，不接受hex直接输入。
Less 中 fade() 和 rgba() 的本质区别
二者都能生成带透明度的颜色，但底层逻辑完全不同：fade() 是对已有颜色整体施加不透明度（alpha），而 rgba() 是直接构造 RGBA 值。这意味着：fade(#007bff, 60%) 会把蓝色的亮度、饱和度等全部“压暗”一层透明感；rgba(0, 123, 255, 0.6) 则只是在 RGB 基础上叠加 alpha 通道，视觉更忠实于原色。
常见错误是混用：比如对一个已含 alpha 的颜色再套 fade()，Less 会报错 TypeError: color is not a color —— 因为 fade() 只接受纯色（hex/rgb/hsl），不接受 rgba() 返回值。
什么时候必须用 fade()？
当你需要动态调整「已有变量色」的透明度，且希望保持 HSL 色彩空间一致性时。fade() 会保留原色的色调（hue）和饱和度（saturation），只改变 alpha，适合主题色体系中派生悬停态、禁用态。
@primary: #007bff;-
.btn:hover { background-color: fade(@primary, 80%); }→ 稳定变浅，不偏色 .btn:disabled { background-color: fade(@primary, 30%); }
注意：fade() 第二个参数是透明度百分比（0–100），不是小数；传 0.8 会当作 0.8%，结果几乎全透明。
什么时候该用 rgba()？
当你明确知道 RGB 分量，或需要精确控制 alpha 小数值（比如动画中插值），或要兼容老版 IE（Less 编译后生成的是标准 rgba()，IE9+ 支持）。
-
rgba(255, 99, 71, 0.4)比fade(#ff6347, 40%)多一重可控性：前者可拆解为变量，后者依赖原始 hex - 若需从变量提取分量：
@red: red(@primary); @green: green(@primary); @blue: blue(@primary); rgba(@red, @green, @blue, 0.7) - 避免写
rgba(#007bff, 0.6)—— Less 不支持 hex 直接进rgba()，会编译失败
透明度叠加时的陷阱
Less 不做运行时合成，所有透明度都是静态计算。如果你嵌套使用：fade(fade(@primary, 50%), 50%)，结果不是 25% 透明度，而是先算出第一层的 rgba 值，再试图对它 fade() —— 这会直接报错。
真正需要多层透明效果（如半透蒙层叠在半透按钮上），必须手动换算：用 alpha() 提取当前 alpha，再按公式 final = alpha1 + alpha2 * (1 - alpha1) 计算，然后用 rgba() 重建。Less 本身不提供自动叠加函数。
最易被忽略的一点：CSS 渲染中，父元素透明度会影响子元素所有属性（包括文字、边框），而 rgba() 或 fade() 仅作用于目标属性。别用 opacity 替代它们来实现局部透明。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
