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

Привет, я пытаюсь изучить SASS/SCSS и пытаюсь реорганизовать мой собственный mixin для clearfix

то, что я хотел бы, это для того, чтобы mixin основывался на том, передаю ли я ширину mixin.

мысли до сих пор (псевдокод только, поскольку я буду включать другие миксины)

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

Буду признателен за любую помощь по лучшему или правильному пути для этого!

Ответы

Ответ 1

Вы можете попробовать следующее:

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

   @if $width == 'auto' {

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

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

Я не уверен в вашем предполагаемом результате, но установка значения по умолчанию должна возвращать значение false.

Ответ 2

Вы можете назначить значения параметров по умолчанию, когда вы сначала создаете mixin:

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

  @if $width == 'auto' {

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

  } @else {

    display: inline-block;
    width: $width;

  }
}