问题:
是否有 SASS 函数/技术可以将 HEX 值转换为简单 RGB 字符串。
这里的简单意味着只是一个字符串,没有包含在 rgb()
中?
例如:#D50000 --> "213,0,0"
为什么我需要这个:
我正在使用 Material Design Lite作为我的用户界面“框架”。更具体地说,我使用的是 SASS 版本,因此我可以根据我的应用程序的样式指南调整颜色变量。
由于某些原因,MDL 的 _variables.scss
中的颜色变量采用这种格式来定义颜色:
$color-primary: "0,0,0" !default; // supposed to be black
这真的很奇怪。我预计,至多,类似
的东西$color-primary: rgba(0,0,0,1) !default;
我的颜色变量存储在另一个名为 _globals.scss
的文件中,我在其中以常规 HEX 格式存储我的变量,以便我可以在其他地方轻松重用它们:
$brand-primary: #FA3166;
$brand-primary-dark: #E02C59;
我不想定义 2 倍的颜色(1 个 HEX 和 1 个 MDL 兼容的 RGB 字符串),因此我需要将 HEX 转换为 RGB 字符串。
最佳答案
@nicholas-kyriakides 的回答非常好,但这里有一个使用 Sass 插值的更简洁的函数。
@function hexToRGBString($hexColor) {
@return "#{red($hexColor)},#{green($hexColor)},#{blue($hexColor)}";
}
您可以显式传入十六进制,也可以从 rgb() 或 rgba() 传入不透明度为 1 的十六进制。
例如:
$color-white: hexToRGBString(#fff) => "255,255,255"
$color-white: hexToRGBString(rgb(255,255,255)) => "255,255,255"
$color-white: hexToRGBString(rgba(#fff,1)) => "255,255,255"
关于没有 'rgb' 前缀的 SASS HEX 到 RGB,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32931749/