CODEWITHSUNDEEP
sass
Rafael Kennedy
Rafael Kennedy

Reputation: 1004

Each in SASS function

I want to use sass (ideally indented syntax) to apply the same transition to several different properties. To do so, I wanted to use the @each directive. I've searched for examples, but documentation on functions in sass is pretty spotty.

here's what I have:

@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)

expected result:

#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)
}

I am getting an error saying: Functions can only contain variable declarations and control directives.

I doubt that the problem is really my append function, but am guessing that I have some kind of syntax error that I can't sufficiently debug.

Any help is appreciated!

Upvotes: 1

Views: 438

Answers (1)

karthick
karthick

Reputation: 12176

If you are sending a list then you have to use comma separated value

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

When you are appending the result you need to assign it to the output again.

change from 

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

to

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

code block

@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)

Upvotes: 3

Related Questions