SCSS karışımında if / else koşulu için sözdizimi

Merhaba SASS / SCSS öğrenmeye çalışıyorum ve kendi mixin'imi clearfix için yeniden düzenlemeye çalışıyorum

Karışımın, bir genişlikte karışımı geçip geçmediğime bağlı olmasını istiyorum.

Şimdiye kadarki düşünceler (sözde kod yalnızca diğer karışımları da dahil edeceğim gibi)

@mixin clearfix($width) {

   @if !$width {

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

   } @else {

        display: inline-block;
        width: $width;
   }
}

işte böyle adlandırabileceğimi düşündüm, ama işe yaramıyor.

@include clearfix();

veya

@include clearfix(100%)

veya

@include clearfix(960px)

Bunu yapmanın en iyi veya en doğru yolu konusunda her türlü yardım için minnettar olurum!

Bunu deneyebilirsin:

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

   @if $width == 'auto' {

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

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

İstediğiniz sonuçtan emin değilim, ancak varsayılan bir değer belirlemek yanlış döndürmelidir.

Mixin'i ilk oluşturduğunuzda varsayılan parametre değerlerini satır içi olarak atayabilirsiniz:

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

  @if $width == 'auto' {

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

  } @else {

    display: inline-block;
    width: $width;

  }
}

Parametreyi nullveya olarak varsayılan yapabilirsiniz false.
Bu şekilde, bir değerin parametre olarak geçip geçmediğini test etmek daha kısa olacaktır.

@mixin clearfix($width: null) {

  @if not ($width) {

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

  } @else {

    display: inline-block;
    width: $width;

  }
}