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

Question

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

这里是我的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%;

我失踪了连接传递一个交换函数的变量。

Answer 1

我最终加入到@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; 
 
     } 
 
    } 
 
    } 
 
}

Answer 2

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

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

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