How to use @mixin multiple times?

Question

Layout

There is a sass mixin to use transition:

@mixin transition-base($property:false){
    @if(not $property){
        transition:all 250ms ease 0s;
    }
    @else{
        transition:$property 250ms ease 0s;
    }
}

So I use:

@include transition-base(padding, color, border-color);

The result is incorrectly compiled code:

transition:padding 0s ease 0s, color 0s ease 0s, border-color 250ms ease 0s;

What is the correct way to use a mixin with multiple values ​​for one argument?

Answer 1

Well, something like this
https://www.sassmeister.com/gist/1791877429a5e794c...

code if too lazy to open the link =)

@mixin transition-base($properties...){
  // Свойство transition-property по-умолчанию равно значению all
  // т.е. запись transition: 250ms ease 0s; будет
  // эквивалентна записи transition: all 250ms ease 0s;
  transition: 250ms ease 0s;
  @if length($properties) > 0 {
    transition-property: $properties;
  }
}
@include transition-base();
@include transition-base(padding, color, border-color);

Answer 2

if I understand correctly...

@mixin transition($args...) {
  -webkit-transition: $args;
     -moz-transition: $args;
      -ms-transition: $args;
          transition: $args;
}

a {
  color:$color;
  @include transition(color .3s ease);
  &:hover {
    color:$color;
  }
}