Syntaxe pour la condition if/else dans un mixin SCSS

Question

Bonjour, je tente d'apprendre SASS/SCSS et j'essaie de refaire ma propre mixin pour le clearfix

ce que je voudrais, c'est que la mixin soit basée sur le fait que je lui passe une largeur.

voici mes réflexions jusqu'à présent (code pseudo uniquement car je vais inclure d'autres mixins)

@mixin clearfix($width) {

   @if !$width {

    // si aucune largeur n'est passée, ou vide, faire ceci

   } @else {

        display: inline-block;
        width: $width;
   }
}

voici comment je pensais pouvoir l'appeler, mais cela ne fonctionne pas.

@include clearfix();

ou

@include clearfix(100%)

ou

@include clearfix(960px)

Je serais reconnaissant de toute aide sur la meilleure ou la bonne façon de le faire!

Answer 1

Vous pouvez assigner des valeurs par défaut aux paramètres en ligne lorsque vous créez le mixin pour la première fois :

@mixin clearfix($width: 'auto') {

  @if $width == 'auto' {

    // si la largeur n'est pas passée, ou est vide, faites ceci

  } @else {

    display: inline-block;
    width: $width;

  }
}

Answer 2

Vous pourriez essayer ceci :

$width:auto;
@mixin clearfix($width) {

   @if $width == 'auto' {

    // if width is not passed, or empty do this

   } @else {
        display: inline-block;
        width: $width;
   }
}

Je ne suis pas sûr du résultat prévu, mais définir une valeur par défaut devrait renvoyer false.

Answer 3

Vous pourriez définir le paramètre par défaut à null ou false.
De cette façon, il serait plus court de vérifier si une valeur a été passée en paramètre.

@mixin clearfix($width: null) {

  @if not ($width) {

    // si la largeur n'est pas passée, ou est vide, faire ceci

  } @else {

    display: inline-block;
    width: $width;

  }
}