SASS函數中的每個函數

Question

我想使用sass（理想的縮進語法）將相同的轉換應用於多個不同的屬性。爲此，我想使用@each指令。我搜索了一些示例，但關於sass中的函數的文檔非常多。

這裏就是我有：

@function default-trans($trans...) 
    $out:() 
    @each $tran in $trans 
    append($out, "#{$tran} 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55)") 
    @return $out 

#sidebar 
    transition: default-trans(background-color width) 

預期的結果：

#sidebar { 
    transition: background-color 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55), width 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 
} 

我收到一個錯誤說： 函數只能包含變量聲明和控制指令。

我懷疑這個問題真的是我的追加函數，但我猜測我有某種語法錯誤，我無法充分調試。

任何幫助表示讚賞！

Answer 1

如果要發送一個列表，那麼你必須使用逗號分隔值

transition: default-trans(background-color, width) 

當你追加，你需要再次將其分配到輸出結果。從

append($out, "#{$tran} 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55)") 

變化

$out: append($out, #{$tran} 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55), comma) 

代碼塊

@function default-trans($trans...) 
    $out:() 
    @each $tran in $trans 
    $out: append($out, #{$tran} 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55), comma) 
    @return $out 

#sidebar 
    transition: default-trans(background-color, width)