如何在mixin中處理可變數量的參數？

Question

我有，目前有兩種顏色的漸變一個mixin：

@mixin gradient($color-start, $color-end) { 
    background-image: linear-gradient(90deg, $color-start 0%, $color-end 100%); 
} 

，我到處使用像這樣

.my-gradient { 
    @include gradient(blue, yellow) 
} 

，但現在我想修改混入（或將其轉換爲一個函數），可以採用兩個或三個參數作爲漸變。

像（僞代碼）：

@mixin gradient($color-start, $color-end, $color-center) { 
    ...if $color-center param exists... 
    background-image: linear-gradient(90deg, $color-start 0%, $color-center 50%, $color-end 100%); 
    ...if $color-center param does not exist... 
    background-image: linear-gradient(90deg, $color-start 0%, $color-end 100%); 
} 

我不知道的處理這種情況的最好辦法。

Answer 1

你可以在你的mixin中編寫if-else子句！

@mixin gradient($color-start, $color-end, $color-center:null) { 
    @if($color-center){ 
     background-image: linear-gradient(90deg, $color-start 0%, $color-center 50%, $color-end 100%); 
    }@else{ 
     background-image: linear-gradient(90deg, $color-start 0%, $color-end 100%);  
    } 

} 

.test_1{ 
    @include gradient(#000, #111); 
} 

.test_2{ 
    @include gradient(#111,#222,#333); 
} 

輸出：

.test_1 { 
    background-image: linear-gradient(90deg, #000 0%, #111 100%); 
} 

.test_2 { 
    background-image: linear-gradient(90deg, #111 0%, #333 50%, #222 100%); 
} 

注意，我的$color-center的參數值設置爲null否則會有一個錯誤，如果你只通過2個參數