SASS/SCSS - 错误：$color：currentColor 不是颜色

Question

当我想生成颜色时遇到一些问题，它会显示错误消息 包含

“错误：$color: currentColor 不是颜色。”??

我不知道这个颜色是从哪里来的，也许是把 hex 转换成 rgb 的函数？？

我的完整代码：

// Function to Convert Hex Color to RGB Color

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

// Color Variables

$transparent:    transparent        !default;
$current:        currentColor       !default;
$white:          #fff               !default;

// Color Map

$shades: () !default;
$shades: map-merge(
    (
        "transparent":    $transparent,
        // The problem is Here it said :
        // currentColor is not a color.
        // Why??
        "current":        $current,
        "white":          $white,
    ),
    $shades
);

// Global Color Map

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

@each $name, $value in $colors {
    @each $shade, $color in $value {
        .color-#{$shade} {
            --color-example1: rgba(#{hexToRGB($color)}, 0);
        }
    }
}

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

.color-transparent {
  --color-example1: rgba(0, 0, 0, 0);
}

.color-current {
  --color-example1: rgba(255, 255, 255, 0);
}

.color-white {
  --color-example1: rgba(255, 255, 255, 0);
}

Answer 1

（感谢user theking2 enlightening me regarding currentColor。）

我想这与 this closed SCSS bug ticket 有关，他们想知道为什么他们不能在 sass rgba 中使用 currentColor。 This comment from one of the contributors 解释了为什么这是不可能的：

这在 Sass 中是不可能的，因为 currentColor 是浏览器在运行时计算的变量。作为预处理器，Sass 无法知道 currentColor 的值，也无法使用颜色函数对其进行调整。您的解决方案是目前我能想到的最好的解决方案，除了使用 JS 在浏览器中进行实时计算并覆盖您的样式表。

当浏览器实现 CSS Color Module Level 5 内置颜色函数时，这也应该可以在纯 CSS 中实现。

我的猜测是这个限制阻止你存储在像map 这样的简单逻辑结构中。您可能能够实现您尝试使用 CSS 变量存储 currentColor 并将该 CSS 变量放入 SCSS 变量中的内容，但我对此没有很高的信心。

我不知道确定这是问题所在，但在我看来很可能。希望 SO 社区中的其他人能够更有信心地验证或反驳这一点。