时间戳

首页 > 解决方案 > SASS 简单函数将 HEX 颜色转换为 RGB 作为不带 alpha 的字符串

css - SASS 简单函数将 HEX 颜色转换为 RGB 作为不带 alpha 的字符串

问题描述

我正在寻找 SASS 中的简单函数，该函数只需将 HEX 颜色转换为 RGB 作为字符串。我在谷歌上搜索，但没有幸运。也许是因为 SASS 中没有任何原生函数？当然，有rgba()功能，但我不想rgba(……)一块。简单的RGB字符串。

例子

输入

$color-bg: #637b9a;
$color-bg-light: lighten($color-bg, 25%);
$color-bg-light-rgb: hex2rgb($color-bg-light); // Functon that I am looking for

:root {
  --color-body-bg-light: $color-bg-light;
  --color-body-bg-light-rgb: $color-bg-light-rgb;
}
body {
  color: var(--color-body-bg-light);
  background-color: rgba(var(--color-body-bg-light-rgb), 0.8);
}

输出

:root {
  --color-body-bg-light: #237b9a;
  --color-body-bg-light-rgb: 44, 123, 154;
}

body {
  color: var(--color-body-bg-light);
  background-color: rgba(var(--color-body-bg-light-rgb), 0.8);
}

标签： csssasscolors

解决方案

你可以这样写函数：

@use "sass:color";
@function hex2rgb($hex) {
  @return red($hex), green($hex), blue($hex);
}

但问题是 sass 无法解析 html 自定义属性的变量。所以这条线--color-body-bg-light: $color-bg-light;行不通。

最后，你会得到这个：

:root {
  --color-body-bg-light: $color-bg-light;
  --color-body-bg-light-rgb: $color-bg-light-rgb;
}

推荐阅读