Question

我正在制作带有图标的社交颜色列表（$ social）。颜色，名称和图标来自sass列表。在代码中，我可以用它们来制作一个带有颜色和图标的整个网络列表。

@each $name,$color,$icon in $social{
    .social{
        &:before{ font-family: $social-font; }
        &.#{$name}{ background: #{$color}; color: color(white);
            @include shadow(rgba(black,0.25),black,false,true);
            &:hover{ background: darken($color,10%); }
            &:before{ content:"#{$icon}"; }
        }
    }
}

我想做的是在我可以使基色变暗的地方悬停。

&:hover{ background: darken($color,10%); }

但是当我这样做时，我得到以下回复： “错误：$ color：null不是'darken'的颜色”

有没有人知道为什么和/或解决方法？有a similar question，但该问题中的人会问为什么会在单级数组中发生这种情况。每个都使用一个多维数组，如下所示：

$social: (
  ("facebook",social(facebook),'7'),
  ("flickr",social(flickr),'w'),
  ("googleplus",social(googleplus),'r'),
  ("twitter",social(twitter),"'"),
  ("linkedin",social(linkedin),'*'),
  ("instagram",social(instagram),'9'),
  ("pinterest",social(pinterest),'K'),
  ("vkontakte",social(vkontakte),'&'),
  ("youtube",social(youtube),'"')
);

正如您所看到的，颜色中没有使用引号。颜色经过一个名为“社交”的功能，它执行以下操作：

@function social($value){
    $color: map-get($social-colors, $value);
    @return $color;
}

也没有引号。

在某种程度上，他们可能在那里，但也是这样：

&:hover{ background: darken(unquote($color),10%); }

没有什么区别。

使用每个函数中列表中的变量 - scss

0 个答案: