css - SASS:map-get不返回变暗可用的颜色

Question

Codesandbox Example

我正在使用他们的文档主题 Bootstrap HERE 。尝试使用 darken() 函数时出现以下错误。

argument $color of darken($color, $amount) must be a color

我已经研究了有关此错误的其他问题，但其中大多数似乎与 Bootstrap 导入的加载顺序有关。我不认为这就是这里发生的事情。似乎从 map-get() 返回的任何内容都不被 darken() 视为颜色。

示例:

// Color Palette
$soft-black: #333333;
$digital-green: #2e7d32;
$digital-green-accent: rgba(47, 127, 51, .10);
$light-green: #84bd00;
$gold: #f0b323;
$gray: #797979;
$gray-accent: rgba(51, 51, 51, 0.44);
$white: #ffffff;
$light-grey: #d2d2d2;
$red: #cc092f;
$dark-green: #005005;
$background-green: #e9eeee;
$background-grey: #f5f5f5;
$teal: #208484;

$colors: (
        "soft-black": $soft-black,
        "digital-green": $digital-green,
        "light-green": $light-green,
        "gold": $gold,
        "gray": purple,
        "white": $white,
        "light-grey": pink,
        "red": $red,
        "dark-green": $dark-green,
        "background-green": $background-green,
        "background-grey": $background-grey,
        "teal": $teal,
);

// Overriding bootstraps theme colors
$theme-colors: (
        "primary": $digital-green,
        "secondary": $gray,
        "success": $light-green,
        "info": $teal,
        "warning": $gold,
        "danger": $red,
        "light": $white,
        "dark": $soft-black
);


// Hard overrides.
// When no sass variables exist to override in bootstrap    
@each $variant in ('primary', 'secondary', 'success', 'warning', 'danger', 'info', 'light', 'dark', 'link') {
  $oc: darken(map-get($theme-colors, $variant), 7.5%);
  .btn-outline-#{$variant}.hover, .btn-outline-#{$variant}:hover {
    background-color: $oc;
    color: $oc;
  }
}

奇怪的是，这确实有效:

  .btn-outline-#{$variant}.hover, .btn-outline-#{$variant}:hover {
    background-color: map-get($theme-colors, $variant);
    color: map-get($theme-colors, $variant);
  }

Answer 1

在发现 @each 列表中有额外的 'link' 后，才注意到评论中的答案。 —您应该删除此问题或将其标记为已回答!

但是这样你就不会再犯同样的错误，也不必维护 2 个列表，最好只循环 $theme-colors map ，例如:

@each $variant, $variant-color in $theme-colors {
  $oc: darken($variant-color, 7.5%);
  .btn-outline-#{$variant}.hover, .btn-outline-#{$variant}:hover {
    background-color: $oc;
    color: $oc;
  }
}

引用号:https://sass-lang.com/documentation/at-rules/control/each#with-maps

Updated version of your Codesandbox Example