SassError：$color为null非颜色值的原因及默认值无效求助

错误原因 #

你遇到的SassError: $color: null is not a color本质是调用darken()函数时传入了null值，即便给$color设了默认值仍未解决，大概率是以下两种情况：

• 显式传递null覆盖默认值：调用alert-variant混合宏时，主动给$color参数传了null，比如@include alert-variant($bg-primary, $border-primary, null)，这种情况下参数默认值会被直接覆盖。
• 默认值设置方式错误：你可能是在混合宏内部通过$color: white !default;设置默认值，而非在混合宏的参数定义阶段声明。这种写法不会生效，因为!default只有在变量未被赋值时才会触发，而混合宏参数已被声明为必填项，内部赋值无法覆盖调用时的传递值。

解决方法 #

1. 修正默认值设置位置
   在混合宏的参数定义时直接声明默认值，确保未传递参数时自动使用默认值：

   @mixin alert-variant($background, $border, $color: #000) {
     color: $color;
     @include gradient-bg($background);
     border-color: $border;
   
     hr {
       border-top-color: darken($border, 5%);
     }
   
     .alert-link {
       color: darken($color, 10%);
     }
   }
   

2. 排查所有混合宏调用
   检查项目中所有调用alert-variant的代码，确认是否存在传递null给$color的情况，或者传递的变量本身未赋值/为null。比如：

   // 错误示例：传递了null
   @include alert-variant($bg-warning, $border-warning, null);
   // 错误示例：变量未赋值
   $text-color: null;
   @include alert-variant($bg-info, $border-info, $text-color);
   

   把这类调用中的null替换为实际颜色值，或确保传递的变量是有效的颜色。

3. 添加防御性处理（可选）
   如果无法避免可能的null传入，可以在混合宏内部增加判断，自动将null替换为默认颜色：

   @mixin alert-variant($background, $border, $color: null) {
     // 如果$color为null，替换为默认值#000
     $color: if($color == null, #000, $color);
     color: $color;
     @include gradient-bg($background);
     border-color: $border;
   
     hr {
       border-top-color: darken($border, 5%);
     }
   
     .alert-link {
       color: darken($color, 10%);
     }
   }
   

内容的提问来源于stack exchange，提问作者lyssa python