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;

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

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

它给了我这个错误：错误：$ color：null不是“轻盈＆＃39; 的颜色，根本没有意义。

现在，当我尝试输出时，我认为当我将值直接传递给函数（在mixin中）时，它可以工作。那么究竟发生了什么/我该怎么做才能解决这个问题？

编辑：我如何调用mixin：

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

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

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

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

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);
}

希望这有帮助

SASS颜色参数始终为空

1 个答案: