SASS 混合并传递作为函数名的变量字符串答案

【问题标题】：SASS mixing and passing a variable string that's a function nameSASS 混合并传递作为函数名的变量字符串
【发布时间】：2017-08-28 21:51:02
【问题描述】：

我正在扩展一个用于生成背景颜色的 SASS mixin。

这是我的混音：

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

我是这样使用它的：

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

我想要做的是将“变暗”或“变亮”作为变量传递，这样我就可以使用 SASS 颜色函数进行控制。像这样的：

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

当我尝试这样做时，我的第一列的 CSS 是这样的：

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

我在传递一个交换函数的变量时缺少连接。

【问题讨论】：

标签： sass

【解决方案1】：

目前不支持定义动态函数名。它一直是requested several years ago，甚至还有一个用于此功能的open pull request，但尚未合并。

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

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

【讨论】：

【解决方案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;
      }
    }
  }
}

【讨论】：