imports - Hacer una mezcla de Sass con argumentos opcionales

sass[]

Question

Estoy escribiendo un mixin como este:

@mixin box-shadow($top, $left, $blur, $color, $inset:"") {
    -webkit-box-shadow: $top $left $blur $color $inset;
    -moz-box-shadow: $top $left $blur $color $inset;
    box-shadow: $top $left $blur $color $inset;
}

Cuando se invoca lo que realmente quiero es que si no se pasa ningún valor de $inset , no se genera nada, en lugar de compilar algo como esto:

-webkit-box-shadow: 2px 2px 5px #555555 "";
-moz-box-shadow: 2px 2px 5px #555555 "";
box-shadow: 2px 2px 5px #555555 "";

¿Cómo reescribo el mixin para que si no se pase el valor de $inset , no se envíe nada?

Answer 1

¡Incluso más DRYer!

@mixin box-shadow($args...) {
  @each $pre in -webkit-, -moz-, -ms-, -o- {
    #{$pre + box-shadow}: $args;
  } 
  #{box-shadow}: #{$args};
}

Y ahora puedes reutilizar tu sombra de caja aún más inteligente:

.myShadow {
  @include box-shadow(2px 2px 5px #555, inset 0 0 0);
}

Answer 2

Una manera DRY mucho mejor

es pasar $args... a @mixin . De esta forma, no importa cuántos $args pase. En la llamada @input , puede pasar todos los argumentos necesarios. Al igual que:

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

Y ahora puedes reutilizar tu sombra de caja en todas las clases que quieras pasando todas las discusiones necesarias:

.my-box-shadow {
  @include box-shadow(2px 2px 5px #555, inset 0 0 0);
}

Answer 3

UNA MANERA SECA DE HACERLO

Y, en general, un buen truco para eliminar las comillas.

@mixin box-shadow($top, $left, $blur, $color, $inset:"") {
  -webkit-box-shadow: $top $left $blur $color #{$inset};
  -moz-box-shadow:    $top $left $blur $color #{$inset};
  box-shadow:         $top $left $blur $color #{$inset};
}

SASS versión 3+, puede usar un unquote() :

@mixin box-shadow($top, $left, $blur, $color, $inset:"") {
  -webkit-box-shadow: $top $left $blur $color unquote($inset);
  -moz-box-shadow:    $top $left $blur $color unquote($inset);
  box-shadow:         $top $left $blur $color unquote($inset);
} 

Lo recogió aquí: pasa una lista a un mixin como argumento único con SASS

Answer 4

Con [email protected]:

// declare
@mixin button( $bgcolor:blue ){
    background:$bgcolor;
}

y usar sin valor, el botón será azul

//use
.my_button{
    @include button();
}

y con valor, el botón será rojo

//use
.my_button{
    @include button( red );
}

funciona con hexa también

Answer 5

Puede poner la propiedad con valor nulo como valor predeterminado y, si no pasa el parámetro, no se interpretará.

@mixin box-shadow($top, $left, $blur, $color, $inset:null) {
  -webkit-box-shadow: $top $left $blur $color $inset;
  -moz-box-shadow:    $top $left $blur $color $inset;
  box-shadow:         $top $left $blur $color $inset;
}

Esto significa que puede escribir la declaración de inclusión de esta manera.

@include box-shadow($top, $left, $blur, $color);

En lugar de escribirlo así.

@include box-shadow($top, $left, $blur, $color, null);

Como se muestra en la respuesta here

Answer 6

Sé que no es exactamente la respuesta que estabas buscando, pero podrías pasar "null" como último argumento cuando @include box-shadow mixin, como este @include box-shadow(12px, 14px, 2px, green, null); Ahora, si ese argumento es solo uno en esa propiedad, esa propiedad (y su valor (predeterminado)) no se compilará. Si hay dos o más argumentos en esa "línea", solo los que anuló no se compilarán (su caso).

La salida de CSS es exactamente como la quería, pero debe escribir su null s :)

  @include box-shadow(12px, 14px, 2px, green, null);

  // compiles to ...

  -webkit-box-shadow: 12px 14px 2px green;  
  -moz-box-shadow: 12px 14px 2px green;  
  box-shadow: 12px 14px 2px green;

Answer 7

Sass admite declaraciones @if . (Ver la documentation )

Podrías escribir tu mixin así:

@mixin box-shadow($top, $left, $blur, $color, $inset:"") {
  @if $inset != "" {
    -webkit-box-shadow:$top $left $blur $color $inset;
    -moz-box-shadow:$top $left $blur $color $inset;
    box-shadow:$top $left $blur $color $inset;
  }
}

Answer 8

Soy nuevo en los compiladores de css, espero que esto ayude,

        @mixin positionStyle($params...){

            $temp:nth($params,1);
            @if $temp != null{
            position:$temp;
            }

             $temp:nth($params,2);
            @if $temp != null{
            top:$temp;
            }

             $temp:nth($params,3);
            @if $temp != null{
            right:$temp;
            }

             $temp:nth($params,4);
            @if $temp != null{
            bottom:$temp;
            }

            $temp:nth($params,5);
            @if $temp != null{
            left:$temp;
            }

    .someClass{
    @include positionStyle(absolute,30px,5px,null,null);
    }

//output

.someClass{
position:absolute;
 top: 30px;
 right: 5px;
}

Answer 9

Una vieja pregunta, lo sé, pero creo que esto sigue siendo relevante. Podría decirse que una forma más clara de hacerlo es usar la función unquote () (que SASS ha tenido desde la versión 3.0.0):

@mixin box-shadow($top, $left, $blur, $color, $inset:"") {
  -webkit-box-shadow: $top $left $blur $color unquote($inset);
  -moz-box-shadow: $top $left $blur $color unquote($inset);
  box-shadow: $top $left $blur $color unquote($inset);
}

Esto es más o menos equivalente a la respuesta de Josh, pero creo que la función explícitamente nombrada está menos ofuscada que la sintaxis de interpolación de cadenas.

Answer 10

aquí está la solución que uso, con notas a continuación:

@mixin transition($trans...) {
  @if length($trans) < 1 {
    $trans: all .15s ease-out;
  }
  -moz-transition: $trans;
  -ms-transition: $trans;
  -webkit-transition: $trans;
  transition: $trans;
}

.use-this {
  @include transition;
}

.use-this-2 {
  @include transition(all 1s ease-out, color 2s ease-in);
}

• prefieren pasar los valores de las propiedades como css nativos para estar cerca de "la lengua"
• permitir pasar una cantidad variable de argumentos
• definir un valor predeterminado para la pereza

Answer 11

@mixin box-shadow($left: 0, $top: 0, $blur: 6px, $color: hsla(0,0%,0%,0.25), $inset: false) {
    @if $inset {
        -webkit-box-shadow: inset $left $top $blur $color;
        -moz-box-shadow: inset $left $top $blur $color;
        box-shadow: inset $left $top $blur $color;
    } @else {
        -webkit-box-shadow: $left $top $blur $color;
        -moz-box-shadow: $left $top $blur $color;
        box-shadow: $left $top $blur $color;
    }
}