Sintaks untuk kondisi if / else di mixin SCSS

Hai, saya mencoba mempelajari SASS / SCSS dan saya mencoba memfaktor ulang mixin saya sendiri untuk clearfix

yang saya inginkan adalah agar mixin tersebut didasarkan pada apakah saya melewatkan mixin dengan lebar.

pemikiran sejauh ini (hanya kode pseudo karena saya akan menyertakan mixin lainnya)

@mixin clearfix($width) {

   @if !$width {

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

   } @else {

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

begini cara saya pikir saya akan menyebutnya, tetapi itu tidak berhasil.

@include clearfix();

atau

@include clearfix(100%)

atau

@include clearfix(960px)

Saya menghargai bantuan apa pun tentang cara terbaik atau benar untuk melakukan ini!

Anda bisa mencoba ini:

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

   @if $width == 'auto' {

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

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

Saya tidak yakin dengan hasil yang Anda inginkan, tetapi menyetel nilai default harus mengembalikan false.

Anda dapat menetapkan nilai parameter default sebaris saat Anda pertama kali membuat mixin:

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

  @if $width == 'auto' {

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

  } @else {

    display: inline-block;
    width: $width;

  }
}

Anda dapat menetapkan parameter secara default ke nullatau false.
Dengan cara ini, akan lebih singkat untuk menguji apakah suatu nilai telah dilewatkan sebagai parameter.

@mixin clearfix($width: null) {

  @if not ($width) {

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

  } @else {

    display: inline-block;
    width: $width;

  }
}