Синтаксис условия if / else в миксине SCSS

Привет, я пытаюсь изучить 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;
   }
}

Я не уверен в ожидаемом результате, но установка значения по умолчанию должна вернуть 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;

  }
}