Estou escrevendo um mixin assim:

@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 chamado, o que realmente quero é que, se nenhum $insetvalor for passado, nada será produzido, em vez de ser compilado para algo assim:

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

Como reescrevo o mixin para que, se não houver valor $insetpassado, nada seja produzido?

Uma maneira mais seca de fazê-lo

E, geralmente, um truque interessante para remover as aspas.

@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 versão 3+, você pode 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);
} 

Peguei isso aqui: passe uma lista para um mixin como um único argumento com o SASS

Uma maneira DRY muito melhor

é passar $args...para o @mixin. Dessa forma, não importa quantos $argsvocê passará. Na @inputchamada, você pode passar todos os argumentos necessários. Igual a:

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

E agora você pode reutilizar sua sombra de caixa em todas as classes que desejar, passando todos os argumentos necessários:

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

Sass suporta @ifdeclarações. (Veja a documentação .)

Você poderia escrever sua mixin assim:

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

Você pode colocar a propriedade null como valor padrão e, se não passar o parâmetro, ele não será interpretado.

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

Isso significa que você pode escrever a instrução include como esta.

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

Em vez de escrever assim.

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

Como mostrado na resposta aqui

Eu sei que é uma pergunta antiga, mas acho que isso ainda é relevante. Indiscutivelmente, uma maneira mais clara de fazer isso é usar a função unquote () (que o SASS possui desde a versão 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);
}

Isso é aproximadamente equivalente à resposta de Josh, mas acho que a função denominada explicitamente é menos ofuscada do que a sintaxe de interpolação de strings.

Eu sei que não é exatamente a resposta que você estava procurando, mas você pode passar "null"como último argumento ao @include box-shadowmisturar, assim: @include box-shadow(12px, 14px, 2px, green, null);Agora, se esse argumento for apenas um nessa propriedade, essa propriedade (e seu valor (padrão)) não será compilado . Se houver dois ou mais argumentos nessa "linha", apenas aqueles que você anulou não serão compilados (seu caso).

A saída CSS é exatamente como você queria, mas você precisa escrever seus 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;

Aqui está a solução que eu uso, com as notas abaixo:

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

• prefere passar valores de propriedade como css nativo para ficar perto da "língua"
• permite passar número variável de argumentos
• definir um valor padrão para preguiça

Com [email protected]:

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

e usar sem valor, o botão ficará azul

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

e com valor, o botão ficará vermelho

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

trabalha com hexa também

Ainda mais seca!

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

E agora você pode reutilizar sua sombra de caixa ainda mais 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;
    }
}

Maneira super simples

Basta adicionar um valor padrão de none$ inset - para

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

Agora, quando nenhum $ inset for passado, nada será exibido.

Você sempre pode atribuir nulo aos seus argumentos opcionais. Aqui está uma correção simples

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

Eu sou novo nos compiladores css, espero que ajude,

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