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

Привет я пытаюсь узнать Сасс/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)

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

3 92
if-statement sass conditional mixins

3 ответа:

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

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

   @if $width == 'auto' {

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

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

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

122

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

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

  @if $width == 'auto' {

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

  } @else {

    display: inline-block;
    width: $width;

  }
}
193

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

@mixin clearfix($width: null) {

  @if not ($width) {

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

  } @else {

    display: inline-block;
    width: $width;

  }
}
0