sass 编译错误说 $color: null 不是颜色，即使我声明了颜色

Question

我是 sass 新手，我写了一些 sass 代码，但它没有编译。

 $classes : primary secondary success warning danger;
    $colors : (primary:#007bff,secondary : #6c757d,success: #28a745,warning: #ffc107,dangaer: #dc3545);
    @each $class in $classes{
      .btn-#{$class}{
        $currentColor: map-get($colors,#{$class});
        background:linear-gradient(to right,$currentColor,lighten($currentColor,10%));
      }
    }

错误是：

$color: null is not a color.
stdin 14:55  root stylesheet on line 14 at column 55

但是当我用变量替换线性梯度时它工作正常，即

$classes : primary secondary success warning danger;
$colors : (primary:#007bff,secondary : #6c757d,success: #28a745,warning: #ffc107,dangaer: #dc3545);

    @each $class in $classes{
      .btn-#{$class}{
        $currentColor: map-get($colors,#{$class});
        background:$currentColor;
        //background:linear-gradient(to right,$currentColor,lighten($currentColor,10%));
      }
    }

这是代码编译成功。

Linear-gradient() 函数中 $currentColor 变量的作用是什么？

Answer 1

事实上，有一些东西可以将变量从 map-get 传递到其他 sass 函数。

但你可以稍微修改一下你的代码，它就会起作用：

$classes: primary secondary success warning danger;
$colors: (
    primary: ( normal: #007bff, light: lighten(#007bff,10%) ),
    secondary: ( normal: #6c757d, light: lighten(#6c757d,10%) ),
    success: ( normal: #28a745, light: lighten(#28a745,10%) ),
    warning: ( normal: #ffc107, light: lighten(#ffc107,10%) ),
    danger: ( normal: #dc3545, light: lighten(#dc3545,10%) )
);
@each $class in $classes{
  .btn-#{$class}{
    $currentColor: map-get(map-get($colors,#{$class}), normal);
    $currentColorLighten: map-get(map-get($colors,#{$class}), light);

    background: linear-gradient(to right, $currentColor, $currentColorLighten);
  }
}

您为每个类定义两种颜色（正常版本和亮化版本），然后通过 double map-get 使用它。