如何用SCSS将CSS变量的HSL格式转换为Hex格式？

问题 #

我拥有多个包含颜色值的CSS变量，希望以HSL格式定义这些变量，请问能否借助Sass将它们转换为Hex格式？

输入的原始代码：

:root {
  --dark: hsl(210, 50%, 13%);
}

期望输出：

:root {
  --dark: #112132;
}

解决方案 #

当然可以，Sass的内置颜色处理函数能轻松实现这个需求。核心思路是先在Sass中用变量存储HSL颜色值，再通过hex()函数将其转换为十六进制格式，最后赋值给CSS变量。

单变量转换示例 #

Sass代码：

:root {
  // 用Sass变量存储HSL颜色
  $dark-hsl: hsl(210, 50%, 13%);
  // 转换为Hex并赋值给CSS变量
  --dark: #{hex($dark-hsl)};
}

编译后生成的CSS代码：

:root {
  --dark: #112132;
}

多批量转换示例 #

如果有多个颜色需要转换，只需重复上述逻辑即可：
Sass代码：

:root {
  $dark-hsl: hsl(210, 50%, 13%);
  $primary-hsl: hsl(200, 70%, 45%);
  $success-hsl: hsl(120, 60%, 40%);
  
  --dark: #{hex($dark-hsl)};
  --primary: #{hex($primary-hsl)};
  --success: #{hex($success-hsl)};
}

编译后生成的CSS代码：

:root {
  --dark: #112132;
  --primary: #258cd1;
  --success: #2ecc71;
}

补充：hex()函数默认输出小写十六进制值，如果需要大写格式，可以配合upper-case()函数使用，例如#{upper-case(hex($dark-hsl))}。

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