Синтаксис умови if / else в SCSS mixin

Привіт, я намагаюся вивчити SASS / SCSS і намагаюся переробити власний міксин для clearfix

що я хотів би, щоб міксин ґрунтувався на тому, чи передаю я комбінацію ширини.

думки поки що (тільки псевдокод, як я буду включати інші міксини)

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

Я не впевнений у бажаному результаті, але якщо встановити значення за замовчуванням, слід повернути помилкове значення.

Ви можете призначити значення параметрів за замовчуванням вбудованими під час першого створення файлу mixin:

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

  }
}