スタイラスで一般的なトランジションルールを作成する方法

Question

スタイラスで一般的なトランジションルールを実行しようとしています。私の機能は特に働いているだけです。それは私に文字列'all ease-in-out 0.2s'を返します。それは一重引用符で囲まれているためブラウザでは機能しません。

純粋なCSSルールを返すことは可能ですか？助けてくれてありがとう。

getTransition(affect = 'all', animationRule = 'ease-in-out', time = 0.2) 
    return affect + " " + animationRule + " " + unit(time, 's') 

コール

transition: getTransition('opacity') 

結果

transition: 'opacity ease-in-out 0.2s'; 

Answer 1

関数を呼び出す際にパラメータに引用符を削除します。

スタイラス

を

getTransition(affect = 'all', animationRule = 'ease-in-out', time = 0.2) 
    return affect + " " + animationRule + " " + unit(time, 's') 

div 
    transition: getTransition(opacity) 

CSS

div { 
    transition: opacity ease-in-out 0.2s; 
}