CSS以一种看起来不正确的方式编译了lighten（）函数和类似的SASS colors函数

Question

CSS 编译以下 mixin 代码：

  @mixin message ($color, $background-color: lighten ($color, 20%) ) {
    color: $color;
    background-color: $background-color;
  }


  .message-danger { @include message(red); }

对此

.message-danger {
  color: red;
  background-color: lighten red, 20%; 
}

很明显，您可以看到 CSS 没有正确编译 lighten（） 函数。我试图将颜色更改为十六进制代码颜色，但这没有什么区别。我以为问题出在我的代码编辑器上，但是当我在 sassmeister 上尝试代码时，它给了我相同的结果。请帮忙。