1

So I'm trying to do something functionally equivalent to this:

Can a sass @mixin accept an undefined number of arguments?

...with a transitionFast mixin, but I want to be strict about the easing functions and speeds, so I've defined them within the mixin, like so:

@mixin transitionFast($property) {
    -webkit-transition:$property ease 0.2s;
    -moz-transition:$property ease 0.2s;
    -o-transition:$property ease 0.2s;
    transition:$property ease 0.2s;
}

How can I pass multiple $properties to this, without passing through the ease 0.2s part? I've tried this:

@mixin transitionFast($properties...) {
    @each $property in $properties {
        transition:$property ease 0.5s;
    }
}

which I'm trying to call like this:

@include transitionFast(background-color, color);

but it doesn't work and only applies the transition to the last passed argument. Any ideas?

Community
  • 1
  • 1
marked-down
  • 9,958
  • 22
  • 87
  • 150

2 Answers2

2

In your case there are several ways to go with sass splat-like args:

1) If you define mixin with splat args like so: 

@mixin transitionFast($properties...) { 
  # with iteration on $properties
}

And you include it normal like this: 

@include transitionFast(firstArg, secondArg, thirdArg);

Then you get

# compiled
transition: firstArg;
transition: secondArg;
transition: thirdArg;

2) You will also get the same thing when you don't specify splat args 

@mixin transitionFast($properties) { 
  # with iteration on $properties
}

And include them with double parents

@include transitionFast((firstArg, secondArg, thirdArg));

3) If you declare mixin this way: 

@mixin transitionFast($properties...) { 
  # with iteration on $properties
}

and call it whis way: 

@include transitionFast(( background-color, color, red ));

you will get behavior similar to default behavior (ie without iteration over splat): 

transition: background-color, color, red;

Now, back to your question, you can do this to get what You want:

$ease: ease 0.5s;
@mixin transitionFast($properties...) {    
    @each $prop in $properties {
        transition: $prop $ease;
    }
}
html {
  @include transitionFast( background-color, color, margin );
}

Edit: instead transition: $prop $ease; go with compass @include transition( $prop $ease ); as Pik_at suggested, its more dry and sexy.

Just for fun:

If you leave (above) mixin as it is and include it like this: 

@include transitionFast(( background-color, color ), padding);

it compiles to 

transition: background-color, color ease 0.5s;
transition: padding ease 0.5s;

combining iteration and regular 'splatting', very cool stuff :)

Drops
  • 2,680
  • 18
  • 16
0

Array parameters should be on bracket like:

@include transitionFast((background-color, color));

I made a simple code test to show you: http://codepen.io/pik_at/pen/wBjgpY

Likewise, using Compass would help you to add transition mixin with browsers prefix:

@mixin transitionFast($properties) {
    @each $property in $properties {
        @include transition($property 2s ease);
    }
}
Pik_at
  • 1,459
  • 9
  • 14