SASS/SCSS：如何在同一个$Color贴图中使用十六进制和RGB颜色？

我有一个想法，使用SCSS创建我想要的不同的东西 实现起来很简单

在同一贴图键中使用两种不同的颜色类型十六进制和RGB

如果我想用proprety创建一个包含RGB值的css颜色类，可以使用它 这将是可能的，同样的事情十六进制颜色

我的完整代码：

@function hexToRGB($hex) {
  @return red($hex), green($hex), blue($hex);
}

$red-50:  #FEF6F5         !default;

$red: () !default;
$red: map-merge(
    (
        "red-50": hexToRGB($red-50),
    ),
    $red
);

$colors: () !default;
$colors: map-merge(
    (
        "red":       $red,
    ),
    $colors
);

@each $name, $value in $colors {
    @each $shade, $color in $value {
        .color-#{$shade} {
            /** RGB Color **/
            --color-example1: rgba(#{$color}, 1);
            /** Hex Color **/
            --color-example2: #{$color};
        }
    }
}

.color-red-50 {
  /** RGB Color **/
  --color-example1: rgba(254, 246, 245, 1);
  /** Hex Color **/
  --color-example2: #FEF6F5;
}

编译成CSS后想要得到的结果：

@function hexToRGB($hex) {
  @return red($hex), green($hex), blue($hex);
}

$red-50:  #FEF6F5         !default;

$red: () !default;
$red: map-merge(
    (
        "red-50": hexToRGB($red-50),
    ),
    $red
);

$colors: () !default;
$colors: map-merge(
    (
        "red":       $red,
    ),
    $colors
);

@each $name, $value in $colors {
    @each $shade, $color in $value {
        .color-#{$shade} {
            /** RGB Color **/
            --color-example1: rgba(#{$color}, 1);
            /** Hex Color **/
            --color-example2: #{$color};
        }
    }
}

.color-red-50 {
  /** RGB Color **/
  --color-example1: rgba(254, 246, 245, 1);
  /** Hex Color **/
  --color-example2: #FEF6F5;
}

我想从这些例子中得到的是使用不同的颜色类型（十六进制和RGB）

---

并在同一map$colors键上使用它们。

您的示例1实际上已经是标准的SCSS行为，您可以将十六进制变量传递给rgb（或rgba）属性，它将自动编译为相关输出。考虑到这一点，在样式表中使用一致性后，对函数的需求就消失了。由于我是SASS新手，请您用示例解释更多内容，谢谢您的帮助