Может ли sass @mixin принимать неопределенное количество аргументов?

Question

Я пытаюсь создать sass mixin для переходов. Это то, что я имею до сих пор.

@mixin transition($var)
  -webkit-transition: $var
  transition: $var

Я хочу иметь возможность передать ему несколько аргументов, подобных этому

@include transition(color .5s linear, width .5s linear)

К сожалению, я получаю следующую ошибку

Syntax error: Mixin transition takes 1 argument but 2 were passed.

Есть ли способ сделать это, чтобы он генерировал следующий вывод в css, все еще принимая неопределенное количество аргументов?

-webkit-transition: color .5s linear, width .5s linear;
transition: color .5s linear, width .5s linear;

Answer 1

Переменные аргументы

Иногда для миксина имеет смысл принять неизвестное количество аргументов. Например, миксин для создания теней может принимать любое количество теней в качестве аргументов. Для этих ситуаций Sass поддерживает «переменные аргументы», которые являются аргументами в конце объявления mixin, которые принимают все оставшиеся аргументы и упаковывают их в список. Эти аргументы выглядят так же, как нормальные аргументы, но сопровождаются .... Например:

@mixin box-shadow($shadows...) {
  -moz-box-shadow: $shadows;
  -webkit-box-shadow: $shadows;
  box-shadow: $shadows;
}

.shadows {
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}

компилируется в:

.shadows {
  -moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  -webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
}

От: Официальная документация SASS

Так что вам просто нужно изменить объявление mixins, чтобы оно выглядело так:

@mixin transition($var...)
  -webkit-transition: $var
  transition: $var

Answer 2

Когда вы вызываете миксин, называйте это так:

@include transition( (color .5s linear, width .5s linear) );

С дополнительными паренами. Это даст понять, что вы хотите использовать это как один аргумент.

РЕДАКТИРОВАТЬ : См. Ответ Джереми Паркера выше при использовании Sass 3.2 или более поздней версии. Реальные переменные аргументы были добавлены в 3.2: http://chriseppstein.github.io/blog/2012/08/23/sass-3-2-is-released

Answer 3

В случае, если вы хотите несколько аргументов и с префиксом поставщика , например, следующий сценарий:

@include transition(transform .5s linear, width .5s linear)

Ожидается

-webkit-transition: -webkit-transform 0.5s linear, width 0.5s linear;
-moz-transition: -moz-transform 0.5s linear, width 0.5s linear;
-ms-transition: -ms-transform 0.5s linear, width 0.5s linear;
-o-transition: -o-transform 0.5s linear, width 0.5s linear;
transition: transform 0.5s linear, width 0.5s linear;

Я предлагаю вам это Mixin , я нашел на Бессмысленное письмо .

Код

@function prefix($property, $prefixes: (webkit moz o ms)) {
    $vendor-prefixed-properties: transform background-clip background-size;
    $result: ();
    @each $prefix in $prefixes {
       @if index($vendor-prefixed-properties, $property) {
         $property: -#{$prefix}-#{$property}
       }
       $result: append($result, $property);
    }
    @return $result;
}

@function trans-prefix($transition, $prefix: moz) {
    $prefixed: ();
    @each $trans in $transition {
        $prop-name: nth($trans, 1);
        $vendor-prop-name: prefix($prop-name, $prefix);
        $prop-vals: nth($trans, 2);
        $prefixed: append($prefixed, ($vendor-prop-name $prop-vals), comma);
    }

    @return $prefixed;
}

@mixin transition($values...) { 
    $transitions: ();
    @each $declaration in $values {
        $prop: nth($declaration, 1);
        $prop-opts: ();
        $length: length($declaration);
        @for $i from 2 through $length {
            $prop-opts: append($prop-opts, nth($declaration, $i));   
        }
        $trans: ($prop, $prop-opts);
        $transitions: append($transitions, $trans, comma);
    }

    -webkit-transition: trans-prefix($transitions, webkit);
    -moz-transition: trans-prefix($transitions, moz);
    -o-transition: trans-prefix($transitions, o);
    transition: $values;
}

Answer 4

Compass имеет переходный миксин, на который вы можете взглянуть (или вы можете просто использовать Compass).Вы можете лучше посмотреть на это здесь: http://beta.compass -style.org / reference / compass / css3 / transition / .

Похоже, вы не можете сделатьнеопределенное количество миксинов, поскольку сопровождающий Compass также помогает поддерживать Sass, и вы можете видеть, что он определил максимальное количество из 10 отдельных аргументов для своего переходного миксина.