imports - pasar una lista a un mixin como un argumento único con SASS

sass-- watch

Question

Me gusta hacer mezclas con SASS que me ayudan a hacer una buena compatibilidad entre navegadores. Quiero hacer una mixin que se vea así:

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

a lo que puedo pasar algo como esto:

@include box-shadow(inset -2px -2px 2px rgba(0,0,0,0.5), inset 1px 1px 2px rgba(255,255,255,0.5), inset 0px 0px 0px 1px #ff800f);

con el resultado siendo algo como esto:

box-shadow: inset -2px -2px 2px rgba(0,0,0,0.5), inset 1px 1px 2px rgba(255,255,255,0.5),inset 0px 0px 0px 1px #ff800f;
-moz-box-shadow: inset -2px -2px 2px rgba(0,0,0,0.5), inset 1px 1px 2px rgba(255,255,255,0.5),inset 0px 0px 0px 1px #ff800f;
-webkit-box-shadow: inset -2px -2px 2px rgba(0,0,0,0.5), inset 1px 1px 2px rgba(255,255,255,0.5),inset 0px 0px 0px 1px #ff800f; 

Sin embargo, esto no funciona porque el compilador cree que estoy tratando de pasar los argumentos de mixin 3. box-shadow toma una cantidad variable de bits separados por comas, por lo que no puedo definir una mezcla como box-shadow($1,$2,$3) .

Intenté pasar

@include box-shadow("inset -2px -2px 2px rgba(0,0,0,0.5), inset 1px 1px 2px rgba(255,255,255,0.5), inset 0px 0px 0px 1px #ff800f");

y compiló, pero en realidad no procesó los estilos.

¿Algún consejo sobre cómo resolver esto?

Answer 1

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

a través de: http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#variable_arguments

Answer 2

SASS 3.1 o menos

Nota: Si está utilizando SASS 3.2+, utilice la función Argumentos variables como sugiere rzar.

Simplemente use la interpolación de cadenas en la mixin en sí, así:

@mixin box-shadow($value) {
  -webkit-box-shadow: #{$value};               // #{} removes the quotation marks that
  -moz-box-shadow: #{$value};                  // cause the CSS to render incorrectly.
  box-shadow: #{$value};
}

// ... calling it with quotations works great ...
@include box-shadow("inset -2px -2px 2px rgba(0,0,0,0.5), inset 1px 1px 2px rgba(255,255,255,0.5), inset 0px 0px 0px 1px #ff800f");

Gracias por el consejo, Ryan.

Answer 3

Esto no compila:

+box-shadow(inset 0 1px 0 #FFD265, 0 0 0 1px #912E01, 0 0 0 7px rgba(0, 0, 0, .1), 0 1px 4px rgba(0, 0, 0, .6))

esto compila:

+box-shadow((inset 0 1px 0 #FFD265, 0 0 0 1px #912E01, 0 0 0 7px rgba(0, 0, 0, .1), 0 1px 4px rgba(0, 0, 0, .6)))

Es decir, agregue un paréntesis alrededor de la lista de sombras separadas por comas y debería funcionar:

+box-shadow( (myshadow1, myshadow2, ...) )

Answer 4

Hay muchas formas de hacerlo, la mejor manera es usar una mezcla así:

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

E incluirlo así:

@include box-shadow(inset 0 1px 0 #FFD265, 0 0 0 1px #912E01, 0 0 0 7px rgba(0, 0, 0, .1), 0 1px 4px rgba(0, 0, 0, .6));

o

@mixin box-shadow($value) {
      -webkit-box-shadow: #{$value};               
      -moz-box-shadow: #{$value};          
      box-shadow: #{$value};
}

E incluirlo así:

@include box-shadow("inset 0 1px 0 #FFD265, 0 0 0 1px #912E01, 0 0 0 7px rgba(0, 0, 0, .1), 0 1px 4px rgba(0, 0, 0, .6)");

o:

@mixin box-shadow($value) {
      $value: unquote($value);
      -webkit-box-shadow: $value;               
      -moz-box-shadow: $value;          
      box-shadow: $value;
}

o:

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

E incluirlo así:

@include box-shadow((inset 0 1px 0 #FFD265, 0 0 0 1px #912E01, 0 0 0 7px rgba(0, 0, 0, .1), 0 1px 4px rgba(0, 0, 0, .6)));

Sass es muy poderoso :)

Answer 5

Quiero señalar que también puede pasar un valor usando el nombre del argumento como lo llama el mixin:

@mixin shadow($shadow: 0 0 2px #000) {
    box-shadow: $shadow;
    -webkit-box-shadow: $shadow; 
    -moz-box-shadow: $shadow; 
}

.my-shadow {
  @include shadow($shadow: 0 0 5px #900, 0 2px 2px #000);
}

tenga en cuenta que scss tiene un alcance, por lo que $shadow conservará su valor de mixin si se utiliza de nuevo más tarde. menos, creo, sufre de reasignación en este escenario

Answer 6

Utilice la interpolación de cadenas

@include box-shadow(#{"inset -2px -2px 2px rgba(0,0,0,0.5), inset 1px 1px 2px rgba(255,255,255,0.5), inset 0px 0px 0px 1px #ff800f"});