$weight控制$color1在混合结果中的占比，取值0–1或带%单位的百分比：mix(#f00,#00f,0.5)与mix(#f00,#00f,50%)等价，mix(#f00,#00f,0)返回#00f，mix(#f00,#00f,1)返回#f00，不可传字符串如"50%"。
mix() 函数在 SCSS 中不是生成“中间色调”的视觉居中工具，而是编译期 RGB 通道加权平均——结果取决于数值插值，不保证人眼感知居中。直接写 mix(#f00, #00f) 得到的是 #7f007f（暗紫），不是明亮的品红。
mix() 的权重参数到底控制什么？
第三个参数 $weight 是 $color1 在混合结果中的占比，取值为 0–1 或带 % 单位的百分比：
- mix(#f00, #00f, 0.5) 和 mix(#f00, #00f, 50%) 等价，都是红蓝各半；
- mix(#f00, #00f, 0) 返回纯蓝（#00f），mix(#f00, #00f, 1) 返回纯红（#f00）；
- 不要传字符串如 "50%"，Sass 会报错 Invalid CSS after "mix(...)": expected expression。
为什么 mix(#ff0, #00f) 不等于视觉上的“中间绿”？
因为 mix() 在 sRGB 空间做线性插值，而人眼对亮度和色相的感知是非线性的：
- mix(#ff0, #00f, 50%) → #7f007f（紫），不是黄+蓝该有的绿；
- 输入含透明度时，alpha 通道也参与线性计算： mix(rgba(255,0,0,0.5), #fff, 50%) → rgba(255,128,128,0.75)；
- 避免混用不同色彩模型（如 #f00 和 hsl(120, 100%, 50%)），Sass 统一转为 RGB 计算，但输出可能违背直觉；
- transparent 等价于 rgba(0,0,0,0)，混入后易拉低整体亮度，产生发灰效果。
如何写出更可控的衍生色（而非“猜中间”）？
实际项目中，与其追求“中间”，不如明确意图并选择合适参照色：
- 浅化主色：用 mix($primary, #ffffff, 80%)，让主色只占 20%，避免冷调过重；
- 加深悬停态：用 mix($primary, #000000, 85%)，比 darken($primary, 10%) 色相更稳；
- 禁用文本：用 mix($text-base, #ffffff, 60%) 向白偏移，比硬设 gray 更协调；
- 不要用 mix($a, $b, 0%) 代替 $b，Sass 不优化恒等式，徒增编译开销；
- 若需 WCAG 合规对比度，请用专用校验工具测最终色值，mix() 不保证可访问性。
mix() 和 color-mix() 完全不能混用
这是最容易踩的坑：
- mix() 是 Sass 编译时函数，输出静态色值（如 #ee3366），不响应 CSS 变量或媒体查询；
- color-mix() 是浏览器运行时 CSS 函数，仅 Chrome 111+ / Safari 16.4+ 支持，Firefox 不支持，且不接受 var(--c) 作参数；
- 写成 color: mix(#f00, #00f); 在 .css 文件里会静默失效；
- 想在现代 CSS 中动态混合？必须用 color-mix(in lch, ...) + fallback + 媒体查询硬编码比例，无法靠 Sass mix() 替代。
真正要生成“中间色调”，得先定义什么是中间：是 RGB 数值居中？LCH 亮度居中？还是设计系统里的语义层级（如 --color-primary-light）？mix() 只负责算数，不负责理解语义。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
