SCSS mixin의 if / else 조건 구문

안녕하세요 저는 SASS / SCSS를 배우려고하고 있으며 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;
   }
}

의도 한 결과는 확실하지 않지만 기본값을 설정하면 false가 반환됩니다.

믹스 인을 처음 만들 때 기본 매개 변수 값을 인라인으로 할당 할 수 있습니다.

@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;

  }
}