Question

我正在扩展SASS mixin以生成背景颜色。

这是我的混音：

＆＃13;

@mixin color-columns ($count, $baseName, $startcolor) {
  $loop_color : $startcolor;
  @for $i from 0 through $count {
    $loop_color : darken($loop_color, 8%);
    .#{$baseName}-#{$i} {
      background-color : $loop_color;
    }
  }
}

＆＃13;

我这样用它：

＆＃13;

@include color-columns(5,'col', $blue);

＆＃13;

我想做的是传入“变暗”。或者＆＃39;减轻＆＃39;作为变量，所以我可以用SASS颜色功能控制。像这样：

＆＃13;

@mixin color-columns ($count, $baseName, $startcolor, $change: 'darken') {
  $loop_color : $startcolor;
  
  @for $i from 0 through $count {
    $loop_color : $change($loop_color, 8%);
    .#{$baseName}-#{$i} {
      background-color : $loop_color;
    }
  }
}

＆＃13;

当我尝试时，第一列的CSS就像这样：

＆＃13;

    background-color: darken darken #005387, 8%, 8%;

＆＃13;

我在传递交换函数的变量时错过了连接。

Answer 1

目前不支持定义动态函数名称。该值为requested several years ago，此功能甚至有open pull request，但尚未合并。

但是，可以使用内置的call($function, $args...)函数动态调用函数。它允许您避免if-else级联，并且可以在您的示例中使用，如下所示：

$loop_color : call($change, $loop_color, 8%);

Answer 2

我最后添加了一个@if来使其工作：

@mixin color-columns ($count, $startcolor, $start : darken) {
  $loop_color : $startcolor;

  @if $start == 'lighten' {
    @for $i from 0 through $count {
      $loop_color : lighten($loop_color, 5%);
      .conBG-#{$i} {
        background-color : $loop_color;
      }
    }
  }
  @else {
    @for $i from 0 through $count {
      $loop_color : darken($loop_color, 5%);
      .conBG-#{$i} {
        background-color : $loop_color;
      }
    }
  }
}

SASS混合并传递一个函数名称的变量字符串

2 个答案: