ไวยากรณ์สำหรับเงื่อนไข if / else ใน SCSS mixin

สวัสดีฉันกำลังพยายามเรียนรู้ SASS / SCSS และกำลังพยายาม refactor 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)

ขอขอบคุณสำหรับความช่วยเหลือเกี่ยวกับวิธีที่ดีที่สุดหรือถูกต้องในการดำเนินการนี้!

คุณสามารถลองสิ่งนี้:

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

   @if $width == 'auto' {

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

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

ฉันไม่แน่ใจในผลลัพธ์ที่คุณต้องการ แต่การตั้งค่าเริ่มต้นควรส่งคืนเป็นเท็จ

คุณสามารถกำหนดค่าพารามิเตอร์เริ่มต้นแบบอินไลน์ได้เมื่อคุณสร้างมิกซ์อินครั้งแรก:

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

  @if $width == 'auto' {

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

  } @else {

    display: inline-block;
    width: $width;

  }
}

คุณสามารถเริ่มต้นพารามิเตอร์หรือnull วิธีนี้จะสั้นกว่าในการทดสอบว่ามีการส่งค่าเป็นพารามิเตอร์หรือไม่false

@mixin clearfix($width: null) {

  @if not ($width) {

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

  } @else {

    display: inline-block;
    width: $width;

  }
}