Как использовать @mixin несколько раз?

Question

[Саша]

Есть sass миксин на использование transition:

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

Так использую:

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

Итог неверно скомпилированный код:

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

Как правильно использовать миксин с указанием нескольких значений одному аргументу?

Answer 1

[Сергей delphinpro]

Ну вот так как-то
https://www.sassmeister.com/gist/1791877429a5e794c...

код, если лень ссылку открывать =)

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

Comments

[Саша]

Сергей ссылку точно не лень, много их просмотрел, пытаясь разобраться, как работает и использовать))
так понимаю смысл именно в $properties... этом месте, что значит возможное использование аргументов более одного раза.

спасибо!!!

[Сергей delphinpro]

Саша, Саша, Троеточие значит, что в переменной будет содержаться массив всех переданных параметров (или оставшихся, например в таком случае mixx($prop1, $prop2...)). Массив в sass - это значения, разделенные запятыми.

[Саша]

Сергей, это примерно ясно.
но вот возникла ошибка
итоговый код

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

в браузере будет таким

а значит, что плавности не будет.

итоговый код должен быть

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

[Сергей delphinpro]

Саша, да, верно. обычно несколько свойств я указываю отдельно.

в вашем миксине можно сделать так:

transition: 250ms ease 0s;
transition-property: $properties;

Работать будет корректно.
При запуске без аргументов, вторая строка вообще не попадет в итоговый css.

[Сергей delphinpro]

Ну или так (песочница почему-то не работает без условия в этом месте, хотя сам sass нормально отрабатывает)

@mixin transition-base($properties...){
  transition: 250ms ease 0s;
  @if length($properties) > 0 {
    transition-property: $properties;
  }
}

[Саша]

Сергей, да, вот последний вариант самое то, что нужно)
тоже указываю отдельно, пользуюсь переменными, решил перейти на миксин.

спасибо за помощь!)

Answer 2

[Andrey Perov]

если правильно понял...

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

Comments

[Саша]

Andrey Perov
в вашем миксине аргументы принимают всю строку, а у меня только значение которое анимируем.
не знаете как реализовать с текущей структурой?

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

[Andrey Perov]

Саша вы sass используете или scss?

[Саша]

Andrey Perov, sass

[Andrey Perov]

Саша а если просто через запятую их, к миксину что я скидывал

@include transition(color 1s, background-color 1s, border-color 1s);

на выходе вы получите

если нужно с условием как у вас прям в точь точь могу попозже скинуть что нибудь...

-webkit-transition: color 1s, background-color 1s, border-color 1s;
-moz-transition: color 1s, background-color 1s, border-color 1s;
-ms-transition: color 1s, background-color 1s, border-color 1s;
transition: color 1s, background-color 1s, border-color 1s;

[Саша]

Andrey Perov, в моем примере оптимальней, кода меньше и сам миксин компактней выглядит, чище, без лишнего)
если например понадобится изменить время анимации то сделать это можно будет в одном месте, а не по всему/всем файлам.
понимаете?)

[Сергей delphinpro]

Andrey Perov, Может хватит уже засорять исходники вендорными свойствами?
Автопрефиксера на вас нет! =))

Мало того, что вы засоряете код, усложняя его восприятие, так еще и пишете лишние свойства.
Например свойства "-ms-transition" нет и никогда не существовало.

[Andrey Perov]

Сергей это просто первый линк взятый с гугла с github, сам ни когда препроцессор sass и не использовал, просто хотел помочь человеку)
А чем код усложняется тут? тут все понятно и ясно)

[Сергей delphinpro]

Andrey Perov, не код, а его восприятие. визуальный мусор