在 SCSS @each 循环中使用颜色函数答案

【问题标题】：Using color functions in a SCSS @each loop在 SCSS @each 循环中使用颜色函数
【发布时间】：2021-04-25 04:08:48
【问题描述】：

我正在尝试创建一个使用三个值的映射的循环，并在输出中使用颜色函数，但是一旦使用颜色函数，我的代码就无法编译。

$socials:
    "facebook" "#2D88FF" "#FFF",
    "twitter" "#1EA1F1" "#FFF",
    "email" "#BDC6CC" "#424445",
    "copy" "#005269" "#FFF";

@each $name, $bg, $fg in $socials {
    .share__link--#{$name} {
        background-color: $bg;
        color: rgba($fg, .8);
        strong {
            color: $fg;
        }
        &:hover {
            background-color: darken($bg, 2%);
        }
    }
}

我的编译错误：

Dart Sass 因以下错误而失败：错误：$color: "#FFF" is not a color。

感谢任何帮助！

【问题讨论】：

标签： sass each

【解决方案1】：

回答我自己的问题：

我的开场数组是问题所在。将我的颜色用引号括起来就是将它们视为字符串而不是颜色对象。

工作代码：

$socials:
    "facebook" #2D88FF #FFF,
    "twitter" #1EA1F1 #FFF,
    "email" #BDC6CC #424445,
    "copy" #005269 #FFF;

@each $name, $bg, $fg in $socials {
    .share__link--#{$name} {
        background-color: $bg;
        color: rgba($fg, .8);
        strong {
            color: $fg;
        }
        &:hover {
            background-color: darken($bg, 2%);
        }
    }
}

【讨论】：