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