SASS 颜色参数始终为空

Question

我在 SASS 中有一个自定义 mixin 来生成一个表格，它只需要一些参数来生成颜色和一些小细节。这是开始：

@mixin generate-table($background, $foreground, $border: 3px, $background-hover: null, $foreground-hover: null) {
  @debug "Background: #{$background}";
  @debug "Foreground: #{$foreground}";
  $background-hover: hover($background) !default;
  $foreground-hover: hover($foreground) !default;

问题是我的悬停颜色函数总是出错，即颜色为 NULL，即使我将正常值传递给它（使用调试来查看它们是否包含东西）。这是函数：

@function hover($color, $ratio: 15%) {
  @if (lightness($color) > 50%) {
    @return darken($color, $ratio);
  } @else {
    @return lighten($color, $ratio);
  }
}

它给了我这个错误：Error: $color: null is not a color for `lightness' 这根本没有意义。

现在，当我尝试一些东西时，我发现当我将值直接传递给函数（在 mixin 中）时，它可以工作。那么发生了什么/我可以做些什么来解决这个问题？

编辑：我如何称呼 mixin：

table {
    @include generate-table($background: #FFF, $foreground: #000);

我也尝试使用颜色作为这样的字符串：

table {
    @include generate-table($background: '#FFF', $foreground: '#000');

当然也没有像这样的直接关联：

table {
    @include generate-table(#FFF, #000);

结果都一样。

Answer 1

将语句更改为这些，它应该可以工作

@function hover($color, $ratio: 15%) {

  @if (lightness($color) > 50%) {
    @return darken($color, $ratio);
  } @else {
    @return lighten($color, $ratio);
  }
}

@mixin generate-table($background, $foreground, $border: 3px, $background-hover: null, $foreground-hover: null) {
  $background-hover:hover($color:$background)!default;
  $foreground-hover:hover($color:$foreground) !default;
}

table{
  @include generate-table($background:#FFFFFF,  $foreground:#000000);
}

希望对你有帮助