SASS中如何从颜色提取H、S、L值并存入独立CSS变量？

别担心，这个需求完全可以实现！你当前的代码只是把完整的颜色值重复输出了三次，核心是要用到SASS自带的颜色处理函数来拆分出H、S、L这三个分量。

SASS提供了三个专门提取HSL分量的内置函数：

• hue($color)：提取颜色的色相值（范围0-360的角度）
• saturation($color)：提取颜色的饱和度值（百分比格式，比如93%）
• lightness($color)：提取颜色的明度值（百分比格式，比如59%）

只需要把你的代码修改成下面这样，就能自动拆分每个颜色的H/S/L值并存入对应的CSS变量：

$colors: (
  "primary": $primary,
  "secondary": $secondary
) !default;

:root {
  @each $color, $value in $colors {
    --#{$color}-h: #{hue($value)};
    --#{$color}-s: #{saturation($value)};
    --#{$color}-l: #{lightness($value)};
  }
}

代码说明： #

1. 不管你的$primary、$secondary是十六进制（比如#2196F3）、RGB/RGBA还是HSL/HSLA格式，SASS都会自动解析并提取对应的HSL分量。
2. 色相值会输出纯数字（比如210，对应210度），饱和度和明度会保留百分比格式，符合CSS变量的使用习惯。
3. 举个实际例子：如果$primary是#2196F3（标准蓝色），编译后会生成：

:root {
  --primary-h: 210;
  --primary-s: 93%;
  --primary-l: 59%;
  /* secondary对应的变量同理 */
}

这样你就能在后续的CSS中直接使用这些拆分后的变量，比如用hsl(var(--primary-h), var(--primary-s), var(--primary-l))来还原颜色，或者单独调整某个分量实现动态效果。

内容的提问来源于stack exchange，提问作者Alireza Noori