SASS HEX 到 RGB 没有 'rgb' 前缀答案

【问题标题】：SASS HEX to RGB without 'rgb' prefixSASS HEX 到 RGB 没有 'rgb' 前缀
【发布时间】：2016-01-01 02:45:28
【问题描述】：

问题：

是否有将 HEX 值转换为简单 RGB 字符串的 SASS 函数/技术。

这里的简单意味着只是一个字符串，没有包含在rgb() 中？

例如：#D50000 --> "213,0,0"

为什么我需要这个：

我使用Material Design Lite 作为我的 UI“框架”。更具体地说，我使用的是 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 字符串。

【问题讨论】：

你应该考虑不要使用这么糟糕的库。这是一个可怕的反模式。谷歌应该为写这篇文章感到羞耻。
您是否广泛使用它？或者你是根据它的这个方面来判断的？我问是因为我（想要）相信我只是在遵循错误的方法来自定义调色板
我查看了源代码。没有一个头脑正常的人会处理这样的颜色。他们所做的类似于使用字符串来处理货币。
@cimmanon 我认为这是有原因的，实际上，情况是我错过了定义颜色的正确途径。我打开了一个 Github 问题 here 问同样的问题
这样做的唯一原因是强制它以 RGB 格式输出（请参阅：stackoverflow.com/questions/15757665/…）。这恰好是一种非常糟糕的做法。

标签： sass material-design material-design-lite

【解决方案1】：

我已经用 SASS 函数破解了它：

@function hexToString($hexColor) {

  // 0.999999 val in alpha actually compiles to 1.0
  $rgbaVal: inspect(rgba($hexColor,0.9999999));

  // slice substring between 'rgba(' and '1.0)' 
  @return str-slice($rgbaVal, 6, str-length($rgbaVal)-6);

}

用法：

$brand-primary: #333;
$color-primary: hexToString($brand-primary);

我认为 MDL 团队打算有一种不同的方式来自定义调色板，但我很想念它，所以如果有人知道更好的方式来自定义 MDL 的调色板，我愿意接受建议。无论哪种方式，这都解决了最初的问题。

【讨论】：

我想知道是否有比使用 0.99999 alpha val 更简单的方法。在rgba() 函数中。我有一个案例，我明确需要一个 rgb 或 rgba 值，因为内联 svg 会阻塞未转义的 '#' 字符。

【解决方案2】：

@nicholas-kyriakides 的回答非常好，但这里有一个使用 Sass 插值的更简洁的函数。

@function hexToRGBString($hexColor) {
  @return "#{red($hexColor)},#{green($hexColor)},#{blue($hexColor)}";
}

您可以显式地或从不透明度为 1 的 rgb() 或 rgba() 传入十六进制。

例如：

$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"

【讨论】：

请注意，如果您使用 lighten 或 darken 修改十六进制值，您可能需要添加 round 以避免在 rgb() 中出现无效值。例如：@return "#{round(red($hexColor))},#{round(green($hexColor))},#{round(blue($hexColor))}";