Vérifier une variable dans Sass mixin & l'imprimer si elle est définie

Question

Je crée un Sass mixin avec 3 arguments dont l'un est optionnel & Je veux imprimer si c'est passé sinon je ne veux imprimer .

Voici comment mon mixin ressemble à:

@mixin name($arg1, $arg2, $arg3: false){ 
    @if $arg3 { #{$arg3} , } 
    & { 
     color: #{$arg1}; 
     > #{$arg2}{ 
      &:before{ 
       something... 
      } 
     } 
    } 
} 

mais cela ne fonctionne pas & il renvoie une erreur

Warning: Syntax error: Invalid CSS after "...$arg3}": expected "{", was "}"

Alors, comment puis-je obtenir le résultat souhaité?

Answer 1

Ce serait comment vous l'écrire:

@mixin name($arg1, $arg2, $arg3: false) { 
    $sel:(); 
    @if $arg3 { 
     $sel: append($sel, unquote($arg3)); 
    } 
    $sel: append($sel, unquote('&'), comma); 
    #{$sel} { 
     color: #{$arg1}; 
     > #{$arg2} { 
      &:before{ 
       border: 1px solid; 
      } 
     } 
    } 
} 

.foo { 
    @include name(yellow, blue, '.bar'); 
} 

Sortie:

.foo .bar, .foo { 
    color: yellow; 
} 

.foo .bar > blue:before, .foo > blue:before { 
    border: 1px solid; 
} 

Cependant, il pourrait être mieux écrit comme ceci:

@mixin name($arg1, $arg2) { 
    color: #{$arg1}; 
    > #{$arg2} { 
     &:before{ 
      border: 1px solid; 
     } 
    } 
} 

%foo, .foo { 
    @include name(yellow, blue); 
} 

.foo .bar { 
    @extend %foo; 
}