SCSSミックスインのif / else条件の構文

こんにちは私はSASS / SCSSを学習しようとしていて、自分のミックスインをクリアフィックス用にリファクタリングしようとしています

私が欲しいのは、ミックスインに幅を渡すかどうかに基づいてミックスインを設定することです。

これまでの考え（他のミックスインを含めるので、疑似コードのみ）

@mixin clearfix($width) {

   @if !$width {

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

   } @else {

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

これは私がそれを呼ぶかもしれないと思った方法ですが、それは機能していません。

@include clearfix();

または

@include clearfix(100%)

または

@include clearfix(960px)

これを行うための最善または正しい方法についての助けをいただければ幸いです！

あなたはこれを試すことができます：

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

   @if $width == 'auto' {

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

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

意図した結果はわかりませんが、デフォルト値を設定するとfalseが返されます。

最初にミックスインを作成するときに、デフォルトのパラメータ値をインラインで割り当てることができます。

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

  @if $width == 'auto' {

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

  } @else {

    display: inline-block;
    width: $width;

  }
}

パラメータのデフォルトをnullまたはにすることができますfalse。
この方法では、値がパラメーターとして渡されたかどうかをテストする方が短くなります。

@mixin clearfix($width: null) {

  @if not ($width) {

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

  } @else {

    display: inline-block;
    width: $width;

  }
}