undefined - qué - sass examples

¿Puede un sass @mixin aceptar una cantidad indefinida de argumentos?

Question

Intento crear un sass mixin para las transiciones. Esto es lo que tengo hasta ahora.

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

Quiero poder pasarle varios argumentos como este

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

Desafortunadamente, recibo el siguiente error

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

¿Hay alguna forma de hacer esto para que produzca 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

Compass tiene una mezcla de transición que puedes echarle un vistazo (o simplemente puedes usar Compass). Puede verlo mejor aquí: http://beta.compass-style.org/reference/compass/css3/transition/ .

Por lo que se ve, 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 mixin de transición.

Answer 2

Cuando llamas a Mixin, llámalo así:

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

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

EDITAR : Vea la respuesta de Jeremie Parker arriba si usa Sass 3.2 o posterior. Argumentos de variables reales se agregaron en 3.2: http://chriseppstein.github.io/blog/2012/08/23/sass-3-2-is-released

Answer 3

En caso de que desee varios argumentos y el prefijo del proveedor , como el siguiente escenario:

@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 sugiero este Mixin , lo encontré en Writing sin sentido .

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

Answer 4

Argumentos Variables

A veces tiene sentido que un mixin tome una cantidad desconocida 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 parecen a los 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);
}

está compilado para:

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

De: documentación oficial de SASS

Así que básicamente solo necesitas cambiar tu declaración de mixins para que se vea así:

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