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

Question

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

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

Answer 1

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

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

  @if $width == 'auto' {

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

  } @else {

    display: inline-block;
    width: $width;

  }
}

Answer 2

Вы можете попробовать это:

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

   @if $width == 'auto' {

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

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

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

Answer 3

Вы можете установить по умолчанию для параметра null или false.
Таким образом, было бы короче проверить, было ли передано значение в качестве параметра.

@mixin clearfix($width: null) {

  @if not ($width) {

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

  } @else {

    display: inline-block;
    width: $width;

  }
}