css - SASS/SCSS：如何在相同的 $color 映射中使用 Hex 和 RGB 颜色？

Question

我有一个想法来使用 SCSS 创建不同的东西我想要实现的非常简单。

在同一个映射键中使用两种不同的颜色类型 HEX 和 RGB。

并使用它如果我想创建一个包含 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};
        }
    }
}

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

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

我想要从这些示例中使用不同的颜色类型（十六进制和 RGB）并在同一个地图 $colors 键上使用它们。

标签： csssass