不带“RGB”前缀的SASS HEX到rgb

Question

问题：

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

这里很简单，意思是只有一个字符串而不包含在rgb()中？

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

为什么我需要这个：

我使用材料设计作为我的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-字符串。

Answer 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的调色板，我愿意接受建议。不管怎样，这解决了原来的问题。

Answer 2

@nicholas的答案非常好，但是这里有一个使用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"