J'écris un mixin comme celui-ci:

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

Quand on appelle ce que je veux vraiment, c'est que si aucune $insetvaleur n'est transmise, rien n'est généré, plutôt que de compiler quelque chose comme ceci:

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

Comment réécrire le mixage pour que s'il n'y a pas de valeur $insetpassée, rien ne soit sorti?

Une façon DRY'r de le faire

Et, généralement, une astuce intéressante pour supprimer les guillemets.

@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 version 3+, vous pouvez utiliser 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);
} 

Je l'ai récupéré ici: passez une liste à un mixin comme argument unique avec SASS

Une bien meilleure façon SEC

est de passer $args...au @mixin. De cette façon, peu importe combien $argsvous passerez. Dans l' @inputappel, vous pouvez passer tous les arguments nécessaires. Ainsi:

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

Et maintenant, vous pouvez réutiliser votre shadow dans toutes les classes de votre choix en passant tous les arguments nécessaires:

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

Sass soutient les @ifdéclarations. (Voir la documentation .)

Vous pouvez écrire votre mixin comme ceci:

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

Vous pouvez mettre la propriété avec null comme valeur par défaut et si vous ne passez pas le paramètre, il ne sera pas interprété.

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

Cela signifie que vous pouvez écrire l'instruction include comme ceci.

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

Au lieu de l'écrire comme ça.

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

Comme indiqué dans la réponse ici

Vieille question, je sais, mais je pense que c'est toujours d'actualité. Sans doute, une façon plus claire de le faire est d'utiliser la fonction unquote () (que SASS possède depuis la version 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);
}

C'est à peu près équivalent à la réponse de Josh, mais je pense que la fonction explicitement nommée est moins obscurcie que la syntaxe d'interpolation de chaîne.

Je sais que ce n'est pas exactement la réponse que vous cherchiez mais vous pouvez passer "null"comme dernier argument lors du @include box-shadowmixage, comme ceci@include box-shadow(12px, 14px, 2px, green, null); maintenant, si cet argument n'est qu'un dans cette propriété que cette propriété (et sa valeur (par défaut)) ne sera pas compilée . S'il y a deux arguments ou plus sur cette "ligne", seuls ceux que vous avez annulés ne seront pas compilés (votre cas).

La sortie CSS est exactement comme vous le vouliez, mais vous devez écrire votre 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;

voici la solution que j'utilise, avec les notes ci-dessous:

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

• préfère passer les valeurs de propriété en tant que CSS natif pour rester proche de "la langue"
• permettre de passer un nombre variable d'arguments
• définir une valeur par défaut pour la paresse

Avec [email protected]:

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

et utiliser sans valeur, le bouton sera bleu

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

et avec la valeur, le bouton sera rouge

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

fonctionne aussi avec hexa

Encore plus sec!

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

Et maintenant, vous pouvez réutiliser votre box-shadow encore plus intelligemment:

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

Manière super simple

Ajoutez simplement une valeur par défaut noneà $ inset - donc

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

Maintenant, quand aucun $ inset n'est passé, rien ne sera affiché.

Vous pouvez toujours attribuer null à vos arguments facultatifs. Voici une solution 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;
}

Je suis nouveau sur les compilateurs CSS, j'espère que cela aide,

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