在前端开发中，颜色是不可或缺的元素。为了更好地管理颜色，在 CSS 预处理器中，我们经常使用 HSL 和 RGB 色彩模型。在 SASS 中，它们的使用也很普遍。但是，有时候我们需要在 HSL 和 RGB 之间进行转换。本文将分享一些 SASS 中转换 HSL 和 RGB 颜色的技巧。
HSL 和 RGB 色彩模型
在 CSS 中，HSL 表示色相(hue)，饱和度(saturation)和亮度(lightness)。例如，一个红色的 HSL 值为 hsl(0, 100%, 50%)，其中 0 表示红色色相，100% 表示饱和度为最高，50% 表示亮度为中间。
RGB 表示红绿蓝三种颜色的混合比例。例如，一个红色的 RGB 值为 rgb(255, 0, 0)，其中 255 表示红色分量最大，0 表示绿色和蓝色分量都为 0。
在 SASS 中转换颜色
下面是一些在 SASS 中转换颜色的技巧。
HSL 和 RGB 数组
SASS 中可以使用 hsl() 和 rgb() 函数来创建 HSL 和 RGB 颜色。例如：
$red-hsl: hsl(0, 100%, 50%); $red-rgb: rgb(255, 0, 0);
有时候，我们需要将 HSL 或 RGB 颜色转化为数组形式方便处理。可以使用 SASS 中的 hsl-to-rgb() 和 rgb-to-hsl() 函数来实现。
$red-hsl: hsl(0, 100%, 50%); $red-rgb: hsl-to-rgb($red-hsl); // $red-rgb is (255, 0, 0) $green-rgb: rgb(0, 255, 0); $green-hsl: rgb-to-hsl($green-rgb); // $green-hsl is (120, 100%, 50%)
HSL 和 RGB 字符串
有时候，我们需要将 HSL 或 RGB 数组形式的颜色转化为字符串形式方便输出。可以使用 ie-hex-str() 函数将 RGB 数组转化为十六进制字符串，使用 hsl() 和 rgb() 函数将颜色数组转化为字符串。
-- -------------------- ---- ------- --------- ------ ----- ----- --------- --------------------------------- -- -------- -- ------- ----------- ------ ---- --- ----------- ----------------------- -- ---------- -- ------- ---------- ----- ----- ----- ---------- ---------------------- ---------- --------------- -- --------- -- ------ -- ----
色相偏移
在 CSS 中，我们可以使用 hue-rotate() 函数来对颜色进行色相偏移。在 SASS 中，可以使用 adjust-hue() 函数来实现。
$red-hsl: hsl(0, 100%, 50%); $red-blue: adjust-hue($red-hsl, 240); // $red-blue is hsl(240, 100%, 50%);
亮度、饱和度调整
在 SASS 中，可以使用 lighten() 和 darken() 函数来调整亮度，使用 saturate() 和 desaturate() 函数来调整饱和度。
$red-hsl: hsl(0, 100%, 50%); $red-lighter: lighten($red-hsl, 20%); // $red-lighter is hsl(0, 100%, 70%); $green-rgb: rgb(0, 255, 0); $green-darker: saturate($green-rgb, 20%); // $green-darker is rgb(0, 229, 0);
总结
在 SASS 中，使用 HSL 和 RGB 色彩模型可以更好地管理颜色，同时，转换 HSL 和 RGB 颜色也很容易。我们可以使用 SASS 中提供的众多函数来实现这些功能，让我们的前端工作更加高效、方便。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c35de483d39b4881760d45