spin(@color, 180)是less中获取互补色的标准方法，它在hsl空间旋转色相180°；灰阶色结果不变，边界色自动绕回；可配合lightness()等函数优化可读性。
less中没有内置complement()函数，得用spin()手动转180°
Less本身不提供直接叫“互补色”的函数，但spin(@color, 180)就是标准解法：它在HSL空间里把色相（Hue）加180度，正好落在色轮对面，视觉上就是互补色。别被名字误导——spin()不是动画，是纯色值变换。
常见错误是误用darken()或lighten()，它们只调明度（L），不改色相，算出来根本不是互补色；还有人试desaturate()，那只是去色，更不对。
-
spin(#ff6b6b, 180)→#6bffbb（珊瑚红的互补是青绿） - 对灰阶色如
#888用spin()结果还是#888，合理——灰色无色相，无所谓互补 - 如果原色已接近色轮边界（比如
#ff0000），spin(180)会自然绕到#00ffff（青色），不会溢出或报错
用lightness()和saturate()微调互补色可读性
直接spin()出来的互补色有时太刺眼或对比度不足，尤其在文字/背景搭配时。这时候不能硬调RGB，而应基于HSL逻辑优化：
- 用
lightness(@color)读取原色明度，互补色若太暗（lightness(spin(@c,180)) ），就<code>lighten(spin(@c,180), 15%) - 若互补色发灰（
saturation(spin(@c,180)) ），可用<code>saturate(spin(@c,180), 20%)提鲜 - 避免链式调用如
saturate(lighten(spin(...)))，先存中间变量，易读且Less编译稳定
注意spin()对透明色（RGBA/HSLA）的处理逻辑
Less的spin()只动色相，完全忽略alpha通道——这是好事，意味着你可以安全地对rgba(255, 107, 107, 0.8)用spin()，输出仍是带0.8透明度的互补色，不用额外处理alpha。
但陷阱在于：如果你用fade()或transparentize()生成了半透色，再spin()，结果的透明度不变，而人眼感知的“互补感”可能因透明度干扰变弱。此时建议先转成不透明色计算，再用fade()还原透明度。
- 错：
spin(fade(#ff6b6b, 20%), 180)→ 互补色透明度也被淡化，对比失效 - 对：
fade(spin(#ff6b6b, 180), 20%)→ 先得准确互补色，再统一降透明度
导出为CSS变量时，spin()必须在编译期完成，不能留到运行时
Less是编译型预处理器，所有颜色计算都在构建时执行。想让互补色变成--accent-complement这样的CSS变量，必须写死在:root里：
:root {
--accent: #ff6b6b;
--accent-complement: spin(#ff6b6b, 180); // ✅ 编译后是 #6bffbb
}
别指望JS运行时读--accent再算互补——CSS变量不支持表达式，spin()也不是浏览器原生函数。真要动态，得换CSS Houdini或JS计算后注入style标签。
最易被忽略的是：团队协作时，有人会把spin(@primary, 180)直接塞进:root，但@primary若定义在另一个文件且未@import，Less编译直接报variable @primary is undefined——这种错误不报颜色问题，只报变量找不到，排查起来特别绕。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
