Question

问题：

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

这里的简单只是一个字符串而不包含在rgb()？

中

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

为什么我需要这个：

我使用Material Design Lite作为我的UI＆＃39;框架＆＃39;。更具体地说，我使用的是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＆amp; 1 MDL兼容的RGB字符串），因此我需要将HEX转换为RGB字符串。

Answer 1

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

Answer 2

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

SASS HEX到RGB没有＆＃39; rgb＆＃39;字首

2 个答案: