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

Posted 2023-03-16

【中文标题】在 SCSS @each 循环中使用颜色函数

【英文标题】：Using color functions in a SCSS @each loop

【发布时间】：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。

感谢任何帮助！

【参考方案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%);