SASS十六进制到RGB，不带'；rgb&x27；前缀

问题：

是否有将十六进制值转换为简单RGB字符串的SASS函数/技术

这里的Simple意思是只包含一个字符串，而不包含在

rgb（）

中

例如：

#D50000-->“213,0,0”

---

我为什么需要这个：

我将其用作我的UI“框架”。更具体地说，我使用的是SASS版本，因此我可以根据我的应用程序的样式指南调整颜色变量

出于某种原因，MDL的

\u variables.scss

中的颜色变量采用以下格式进行颜色定义：

$color-primary: "0,0,0" !default; // supposed to be black

这真的很奇怪。我最多只能期待一些类似的事情

$color-primary: rgba(0,0,0,1) !default;

我的颜色变量存储在另一个名为

\u globals.scss

的文件中，在该文件中，我以常规十六进制格式存储变量，以便在其他地方轻松重用它们：

$brand-primary: #FA3166;
$brand-primary-dark: #E02C59;

---

我不想定义2倍于我的颜色（1个十六进制和1个MDL兼容的RGB字符串），因此我需要将十六进制转换为RGB字符串。

我用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的调色板，我愿意接受建议。无论哪种方式，这都解决了原来的问题。

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

---

你应该考虑不要使用这样蹩脚的图书馆。这是一个可怕的反模式。谷歌应该为写这篇文章感到羞耻。你广泛使用了它吗？或者你是根据这方面来判断的？我这样问是因为我（想）相信我只是在采用错误的方法来定制Palette，我通过源代码查看了一下。没有一个头脑正常的人会处理这样的颜色。他们所做的类似于使用字符串来处理货币。@cimmanon我认为这是有原因的，事实上，我没有找到定义颜色的正确途径。我打开了一个Github问题，询问Same这样做的唯一原因是强制它以RGB格式输出（请参阅：）。这恰好是一种非常糟糕的方法。我想知道是否有比在

rgba（）

函数中使用0.9999 alpha val.更简单的方法。我有一个明确需要rgb或rgba值的例子，因为内联svg会阻塞一个未缩放的“#”字符。请注意，如果您使用例如

变亮

或

变暗

修改十六进制值，则可能需要添加

舍入

，以避免在

rgb（）中出现无效值。例如：
@return“{round（red（$hexColor））}、{round（green（$hexColor））}、{round（blue（$hexColor））}”