Syntaxe de la condition if / else dans SCSS mixin

Salut, j'essaie d'apprendre SASS / SCSS et j'essaye de refactoriser mon propre mixin pour clearfix

ce que j'aimerais, c'est que le mixin soit basé sur le fait que je passe le mix dans une largeur.

pensées jusqu'à présent (pseudo code uniquement car je vais inclure d'autres mixins)

@mixin clearfix($width) {

   @if !$width {

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

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

J'apprécierais toute aide sur la meilleure ou la bonne façon de faire cela!

Vous pouvez 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 escompté, mais la définition d'une valeur par défaut doit renvoyer false.

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

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

  @if $width == 'auto' {

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

  } @else {

    display: inline-block;
    width: $width;

  }
}

Vous pouvez définir par défaut le paramètre nullou false.
De cette façon, il serait plus court de tester si une valeur a été passée en paramètre.

@mixin clearfix($width: null) {

  @if not ($width) {

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

  } @else {

    display: inline-block;
    width: $width;

  }
}