推荐直接使用十六进制带 alpha 通道（#RRGGBBAA 或 #RGBA）定义透明色，如 #007bffcc；Sass 原样输出，兼容现代浏览器；动态调整用 transparentize()/opacify()，避免 rgba() 阻断颜色运算。
直接用十六进制带 alpha 通道写 #RGBA 或 #RRGGBBAA
Sass 本身不提供额外语法来“定义透明颜色”，它只是编译器，最终输出的是标准 CSS。所以最简单、最推荐的方式就是直接写带透明度的十六进制色值：#88888844（8 位）或 #8884（4 位）。Sass 完全支持，编译后原样输出，无兼容性问题，也无需函数转换。
注意：这种写法要求目标浏览器支持 #RRGGBBAA / #RGBA（Chrome 111+、Firefox 119+、Safari 17+ 已全面支持；旧版 Safari 和 IE 不支持）。
-
#f008→ 红色，alpha = 0.5（8是十六进制的 128/255 ≈ 0.5） -
#0000ffcc→ 纯蓝，alpha = 0.8（cc= 204/255 ≈ 0.8） - 变量定义示例：
$primary: #007bffcc;
rgba() 函数在 Sass 中仍可用，但慎用于变量计算
如果你需要动态计算透明度（比如基于某个基础色 + 变量 alpha），rgba($color, $alpha) 仍是合法写法，Sass 会把它编译为 CSS rgba() 函数。
但要注意：Sass 的 rgba() 是**运行时函数**，不能直接参与颜色运算（如 lighten($color, 10%)），且一旦用它生成变量，该变量就变成字符串形式的函数调用，后续无法再当颜色对象处理。
立即学习“前端免费学习笔记（深入）”；
- ✅ 可以：
$btn-bg: rgba($blue, 0.15);
- ❌ 不行：
$lighter: lighten($btn-bg, 10%); // 报错：$btn-bg 不是颜色类型
- ✅ 更稳妥的替代：
$base-blue: #007bff;
——保留原始色变量用于计算
$btn-bg: rgba($base-blue, 0.15);
用 transparentize() 或 opacify() 做相对透明度调整
当你已有不透明颜色变量，想按「降低/提升多少透明度」来派生新色时，这两个函数比硬写 rgba() 更语义清晰、更易维护。
它们接收一个颜色和一个 0–1 的数值，返回新颜色（不是字符串），可继续参与其他颜色函数运算。
-
transparentize(#007bff, 0.3)→ 在原色基础上增加 30% 透明度（即 alpha 从 1 → 0.7） -
opacify(rgba(0, 123, 255, 0.5), 0.2)→ alpha 从 0.5 → 0.7 - 实用变量链：
$primary: #007bff;
$primary-faded: transparentize($primary, 0.4);
$primary-hover: opacify($primary, 0.1);
别用 hsla() 或 hsl() 混淆 alpha 层级
虽然 hsla() 也能表达透明色，但它本质是把 HSL 颜色转成 RGBA 输出，**不改变底层颜色模型**。对大多数 UI 场景来说，它没有实际优势，反而容易让人误以为“HSL 本身支持透明”——其实只是函数包装。
更关键的是：hsla() 返回的仍是不可计算的颜色值（同 rgba()），且 hue/saturation/lightness 调整与 alpha 解耦，不如 transparentize() 直观。
- 不推荐：
$bg: hsla(200, 100%, 50%, 0.2); // 语义模糊，难维护
- 优先选：
$bg: transparentize(#00aaff, 0.8); // 一眼看出是 #00aaff 的弱化版
真正容易被忽略的是：透明色在叠加时受背景影响极大，#00000044 在白底和黑底上视觉差异巨大，而 Sass 编译器完全不感知上下文。所以定义透明变量时，务必在真实页面环境中验证——别只看变量值本身。
