Cú pháp cho điều kiện if / else trong SCSS mixin

Xin chào, tôi đang cố gắng học SASS / SCSS và đang cố gắng cấu trúc lại bản mixin của riêng mình cho clearfix

điều tôi muốn là mixin dựa trên việc tôi có vượt qua chiều rộng của mixin hay không.

suy nghĩ cho đến nay (chỉ mã giả vì tôi sẽ bao gồm các mixin khác)

@mixin clearfix($width) {

   @if !$width {

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

   } @else {

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

đây là cách tôi nghĩ tôi có thể gọi nó, nhưng nó không hoạt động.

@include clearfix();

hoặc là

@include clearfix(100%)

hoặc là

@include clearfix(960px)

Tôi đánh giá cao bất kỳ sự trợ giúp nào về cách tốt nhất hoặc đúng để làm điều này!

Bạn có thể thử điều này:

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

   @if $width == 'auto' {

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

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

Tôi không chắc về kết quả dự kiến ​​của bạn, nhưng việc đặt giá trị mặc định sẽ trả về false.

Bạn có thể chỉ định nội tuyến các giá trị tham số mặc định khi lần đầu tiên bạn tạo mixin:

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

  @if $width == 'auto' {

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

  } @else {

    display: inline-block;
    width: $width;

  }
}

Bạn có thể mặc định tham số thành nullhoặc false.
Bằng cách này, sẽ ngắn hơn để kiểm tra xem một giá trị đã được chuyển dưới dạng tham số hay chưa.

@mixin clearfix($width: null) {

  @if not ($width) {

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

  } @else {

    display: inline-block;
    width: $width;

  }
}