mix()是SCSS编译期颜色函数，非CSS原生，需经Sass编译为静态色值（如#ee3366）；权重参数$weight表示$color1占比，支持0–1或百分比写法，默认50%；透明度参与RGBA线性插值，但不支持运行时响应CSS变量或媒体查询。
mix() 函数在 SCSS 中不是 CSS 原生函数，而是 Sass 编译期的颜色计算函数——它不依赖浏览器支持，但必须经 Sass（或 Dart Sass、Node Sass）编译才能生效。直接写在 .css 文件里或用 <style></style> 标签内联写 mix() 会报错或被忽略。
SCSS 的 mix() 是编译时计算，不是运行时 CSS 函数
很多人误以为 mix() 和 CSS 新增的 color-mix() 或实验性 mix-blend-mode 是一回事，其实完全无关：
- mix($color1, $color2, $weight) 在编译阶段就转成一个确定的十六进制或 RGB 值；
- 浏览器最终看到的是静态颜色，比如 #ee3366，而非任何函数调用；
- 它不响应媒体查询变化、不随 CSS 变量更新、也不能用 JavaScript 动态改参。
mix() 的权重参数是 $color1 占比，且接受 0–1 或百分比两种写法
第三个参数 $weight 控制第一个颜色的“贡献度”，但容易混淆的点在于：
- mix(#f00, #00f, 0.25) 和 mix(#f00, #00f, 25%) 等价，都表示红色占 25%，蓝色占 75%；
- 若省略该参数，默认为 50%，即等比混合；
- 传入 0 或 0% 会得到纯 $color2，传入 1 或 100% 得到纯 $color1；
- 不要传字符串如 "25%"，Sass 会报错 Invalid CSS after "...mix(#f00, #00f,": expected expression (e.g. 1px, bold), was '"25%"'。
透明度参与混合，但行为取决于输入颜色格式
当任一输入色带 alpha（如 rgba(255, 0, 0, 0.5) 或 hsla(0, 100%, 50%, 0.3)），mix() 会按 RGBA 空间线性插值透明通道：
- mix(rgba(255,0,0,0.5), #fff, 50%) → 半透红与不透白各半 → 结果是 rgba(255, 128, 128, 0.75)；
- 但如果两个都是不透明色（如 #f00 和 #00f），结果也必不透明；
- 混合 transparent 时需注意：它等价于 rgba(0,0,0,0)，不是“无色”，而是黑+全透，可能拉低亮度；
- 避免混用 #rrggbb 和 hsl() 等不同色彩空间输入——Sass 内部统一转为 RGB 计算，但人眼感知可能和直觉不符（比如蓝+黄不总得绿）。
别把 mix() 当作设计系统里的“动态主题引擎”
它适合生成固定色板（如按钮悬停色、禁用态灰阶、状态 badge 色），但不适合需要运行时切换的主题逻辑：
- 无法响应 :root 中的 CSS 自定义属性变化；
- 不能嵌套在 @media 或 @container 中动态重算；
- 如果你写了 $primary: var(--primary-color); mix($primary, #000, 20%)，Sass 会尝试把 var(--primary-color) 当字符串处理，直接编译失败；
- 真正需要运行时混合，请改用 CSS 的 color-mix(in srgb, color1, color2)（Chrome 111+ / Safari 16.4+ 支持），或降级 fallback 到 JS 计算 + style.color 设置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
