Sass(SCSS) At-Rules #5[@if and @else]

@if and @else

  // @if 구문
  @if < 표현식 > { ... }

@if는 위와 같이 쓰입니다. 표현식은 대개 참 또는 거짓 중 하나로 평가되고, 평가되어 반환되는 값에 따라 블록의 평가여부가 결정됩니다.

• SCSS

  @mixin avatar($size, $circle: false) {
    width: $size;
    height: $size;
  
    @if $circle {
      border-radius: $size / 2;
    }
  }
  
  .square-av { @include avatar(100px, $circle: false); }
  .circle-av { @include avatar(100px, $circle: true); }

• CSS

  .square-av {
    width: 100px;
    height: 100px;
  }
  
  .circle-av {
    width: 100px;
    height: 100px;
    border-radius: 50px;
  }

---

@else

  // @else 구문
  @else {...}

@if 식이 false를 반환하는 경우 @else 식이 평가됩니다.

• SCSS

  $light-background: #f2ece4;
  $light-text: #036;
  $dark-background: #6b717f;
  $dark-text: #d2e1dd;
  
  @mixin theme-colors($light-theme: true) {
    @if $light-theme {
      background-color: $light-background;
      color: $light-text;
    } @else {
      background-color: $dark-background;
      color: $dark-text;
    }
  }
  
  .banner {
    @include theme-colors($light-theme: true);
    body.dark & {
      @include theme-colors($light-theme: false);
    }
  }

• CSS

  .banner {
    background-color: #f2ece4;
    color: #036;
  }
  body.dark .banner {
    background-color: #6b717f;
    color: #d2e1dd;
  }

---

else if

@else if <표현식> {...}을 사용하면, 앞 @if절의 표현이 거짓(false)을 반환하고 @else절이 참(true)을 반환하는 경우에 블록이 평가됩니다. 또한 @if 다음에 원하는 만큼 @else if를 체인으로 묶을 수 있습니다.

• SCSS

  @mixin triangle($size, $color, $direction) {
    height: 0;
    width: 0;
  
    border-color: transparent;
    border-style: solid;
    border-width: $size / 2;
  
    @if $direction == up {
      border-bottom-color: $color;
    } @else if $direction == right {
      border-left-color: $color;
    } @else if $direction == down {
      border-top-color: $color;
    } @else if $direction == left {
      border-right-color: $color;
    } @else {
      @error "Unknown direction #{$direction}.";
    }
  }
  
  .next {
    @include triangle(5px, black, right);
  }

• CSS

  .next {
    height: 0;
    width: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 2.5px;
    border-left-color: black;
  }