¿Puede un sass @mixin aceptar un número indefinido de argumentos?

Question

Estoy tratando de crear un mixin sass para las transiciones. Esto es lo que tengo hasta ahora.

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

Quiero ser capaz de pasar múltiples argumentos como éste

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

Por desgracia, me sale el siguiente error

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

¿Hay una manera de hacer esto por lo que produce el siguiente resultado en css mientras se acepta un número indefinido de argumentos?

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

Answer 1

de argumentos variables

A veces tiene sentido para un mixin tomar un número indeterminado de argumentos. Por ejemplo, un mixin para crear sombras de recuadro puede tomar cualquier cantidad de sombras como argumentos. Para estas situaciones, Sass admite "argumentos variables", que son argumentos al final de una declaración mixin que toma todos los argumentos sobrantes y los empaqueta como una lista. Estos argumentos se ven como argumentos normales, pero son seguidos por ....Por ejemplo:

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

se compila a:

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

Desde: SASS official Documentation

Así que, básicamente, sólo tiene que cambiar su declaración mixins a tener este aspecto:

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

Answer 2

La brújula tiene una mezcla de transición que podría echar un vistazo (o simplemente podría usar la brújula). Puede verlo mejor aquí: http://beta.compass-style.org/reference/compass/css3/transition/.

Por lo que parece, no se puede hacer un número indefinido de mixins ya que el mantenedor de Compass también ayuda a mantener Sass y se puede ver que ha definido un número máximo de 10 argumentos separados para su transición mixin.

Answer 3

Cuando se llama a la mixin, lo llaman así:

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

Con los parens adicionales. Esto le dará importancia al hecho de que quiera que esto se use como un único argumento.

EDIT: Consulte la respuesta anterior de Jeremie Parker si usa Sass 3.2 o posterior. se añadieron de argumentos variables reales en 3.2: http://chriseppstein.github.io/blog/2012/08/23/sass-3-2-is-released

Answer 4

En caso de que desee múltiples argumentos y proveedor prefijada, al igual que el escenario de barbecho:

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

esperado

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

te sugiere esto Mixin, he encontrado en Meaningless Writing.

Código

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