web-dev-qa-db-fra.com

Faire un mix Sass avec des arguments optionnels

J'écris un mixin comme ceci:

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

Lorsque j'appelle ce que je veux vraiment, c'est que si aucune valeur $inset n'est transmise, rien n'est généré, plutôt qu'une compilation comme ceci:

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

Comment puis-je réécrire le mixin de sorte que s'il n'y a pas de valeur de $inset passée, rien ne soit produit?

sass
178
Rich Bradshaw

Une façon de le faire à sec

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

J'ai ramassé ça ici: passer une liste à un mixin en argument simple avec SASS

230
Joshua Pinter

Une façon bien meilleure DRY

est de passer $args... au @mixin. Ainsi, quel que soit le nombre $args que vous passerez . Dans l'appel @input, vous pouvez transmettre 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 box-shadow dans chaque classe de votre choix en passant tous les arguments nécessaires:

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

Sass prend en charge les instructions @if. (Voir la documentation .)

Vous pourriez é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;
  }
}
44
Andrew Vit

Vous pouvez mettre la propriété avec null comme valeur par défaut et si vous ne transmettez 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

20
user1551211

Vieille question, je sais, mais je pense que cela est toujours d'actualité. Pour ce faire, un moyen plus clair consiste à utiliser la fonction unquote () (utilisée par SASS 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);
}

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

14
Bob Sammers

Je sais que ce n'est pas exactement la réponse que vous recherchiez, mais vous pouvez passer "null" en dernier argument lorsque @include box-shadow mixin, comme ceci @include box-shadow(12px, 14px, 2px, green, null);. Maintenant, si cet argument est unique dans cette propriété, cette propriété (et sa valeur (par défaut)) a gagné ' Ne pas être compilé. S'il y a deux arguments ou plus sur cette "ligne", seuls les arguments annulés ne seront pas compilés (votre cas).

La sortie CSS est exactement comme vous le souhaitiez, 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;
12
Drops

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érez transmettre les valeurs de propriété en css natif pour rester proche de "la langue"
  • permet de passer un nombre variable d'arguments
  • définir une valeur par défaut pour la paresse
5
duggi

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 

3
gael

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);
}
3
Ben Kalsky

Manière super simple

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

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

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

1
fidev
@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;
    }
}
1
Adam C

Je suis nouveau sur les compilateurs css, espérons 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;
}
0
mike tracker

Vous pouvez toujours affecter la valeur 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;
}
0
Benjamin