How to make a generic transition rule in Stylus

Question

I am trying to do a generic transition rule in Stylus. My function is working only particular. It returns to me a string 'all ease-in-out 0.2s' not a rule and it's not working in a browser because it is inside single-quotes.

Is it possible to return a pure css rule? Thanks for any help.

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

call

transition: getTransition('opacity')

result

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

Answer 1

Remove the quotes in the parameter when you call the function:

Stylus

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;
}