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 llama lo que realmente quiero es que si no $insetse pasa ningún valor, no se genera nada, en lugar de compilarse en 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 pasa ningún valor $inset, no se emite nada?

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

Recogí esto aquí: pasar una lista a un mixin como argumento único con SASS

Una forma SECA mucho mejor

es pasar $args...a la @mixin. De esa manera, no importa cuántos $argspases. En la @inputllamada, 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 puede reutilizar su sombra de cuadro en cada clase que desee pasando todos los argumentos necesarios:

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

Sass apoya @ifdeclaraciones. (Ver la documentación ).

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

Puede colocar la propiedad con 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 aquí

Antigua 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.

Sé que no es exactamente la respuesta que estabas buscando, pero podrías pasar "null"como último argumento cuando @include box-shadowmezclas, así@include box-shadow(12px, 14px, 2px, green, null); Ahora, si ese argumento es solo uno en esa propiedad que 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 nulls :)

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

Aquí está la solución que uso, con las 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);
}

• prefiero pasar valores de propiedad como CSS nativo para permanecer cerca de "la lengua"
• permitir pasar un número variable de argumentos
• definir un valor predeterminado para la pereza

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

también funciona con hexa

Incluso más seco!

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

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

Manera super simple

Simplemente agregue un valor predeterminado de none$ inset, así que

@mixin box-shadow($top, $left, $blur, $color, $inset: none) { ....

Ahora, cuando no se pasa $ inset, no se mostrará nada.

Siempre puede asignar nulo a sus argumentos opcionales. Aquí hay una solución simple

@mixin box-shadow($top, $left, $blur, $color, $inset:null) { //assigning null to inset value makes it optional
    -webkit-box-shadow: $top $left $blur $color $inset;
    -moz-box-shadow: $top $left $blur $color $inset;
    box-shadow: $top $left $blur $color $inset;
}

Soy nuevo en compiladores 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;
}