Sto scrivendo un mixin come questo:

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

Quando viene chiamato, ciò che voglio veramente è che se non $insetviene passato alcun valore, non viene emesso nulla, anziché compilare in qualcosa del genere:

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

Come riscrivo il mixin in modo che se non c'è valore di $insetpassato, non viene emesso nulla?

Un modo secco di farlo

E, generalmente, un trucco per rimuovere le virgolette.

@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 versione 3+, è possibile utilizzare 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);
} 

L'ho preso qui: passa un elenco a un mixin come singolo argomento con SASS

Un modo DRY molto migliore

è passare $args...al @mixin. In questo modo, non importa quanti $argsne passerai. Nella @inputchiamata, puoi passare tutti gli argomenti necessari. Così:

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

E ora puoi riutilizzare il box-shadow in ogni classe che desideri passando tutti gli argomenti necessari:

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

Sass supporta le @ifdichiarazioni. (Vedi la documentazione .)

Puoi scrivere il tuo mixin in questo modo:

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

Puoi mettere la proprietà con null come valore predefinito e se non passi il parametro non verrà interpretata.

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

Ciò significa che puoi scrivere l'istruzione include in questo modo.

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

Invece di scriverlo in questo modo.

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

Come mostrato nella risposta qui

Vecchia domanda, lo so, ma penso che sia ancora rilevante. Probabilmente, un modo più chiaro per farlo è usare la funzione unquote () (che SASS ha avuto dalla versione 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);
}

Ciò equivale all'incirca alla risposta di Josh, ma penso che la funzione chiamata esplicitamente sia meno offuscata della sintassi di interpolazione delle stringhe.

So che non è esattamente la risposta che stavi cercando, ma potresti passare "null"come ultimo argomento quando @include box-shadowmixin, come questo @include box-shadow(12px, 14px, 2px, green, null);Ora, se quell'argomento è solo uno in quella proprietà rispetto a quella proprietà (e il suo valore (predefinito)) non verrà compilato . Se ci sono due o più argomenti su quella "linea", solo quelli che hai annullato non verranno compilati (il tuo caso).

L'output CSS è esattamente come lo volevi, ma devi scrivere i tuoi null:)

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

ecco la soluzione che uso, con le note di seguito:

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

• preferire passare valori di proprietà come CSS nativo per stare vicino a "la lingua"
• consentire il passaggio di un numero variabile di argomenti
• definire un valore predefinito per la pigrizia

Con sass@3.4.9:

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

e utilizzare senza valore, il pulsante sarà blu

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

e con valore, il pulsante sarà rosso

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

funziona anche con hexa

Modo ancora più ASCIUTTO!

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

E ora puoi riutilizzare la tua ombra ancora più intelligente:

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

Modo super semplice

Basta aggiungere un valore predefinito di nonea $ inset - così

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

Ora quando non viene passato $ inset non verrà visualizzato nulla.

Puoi sempre assegnare null ai tuoi argomenti opzionali. Ecco una soluzione semplice

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

Sono nuovo ai compilatori CSS, spero che questo aiuti,

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