TIL | SCSS @if(지시어)

cos·2022년 1월 14일
0
post-thumbnail

@if 지시어는 조건에 따른 분기 처리가 가능하며, if statements(if문)과 유사하다.
같이 사용할 수 있는 지시어는 @else, if가 있다.
추가 지시어를 사용하면 좀 더 복잡한 조건문을 작성할 수 있다.

// @if

@if (조건) {
  /* 조건이 참일 때 구문 */
}

// @if else

@if (조건) {
  /* 조건이 참일 때 구문 */
} @else {
  /* 조건이 거짓일 때 구문 */
}

// @if @else if

@if (조건1) {
  /* 조건1이 참일 때 구문 */
} @else if (조건2) {
  /* 조건2가 참일 때 구문 */
} @else {
  /* 모두 거짓일 때 구문 */
}

조건에 ()는 생략이 가능하기 때문에, ()없이 작성하는 방법이 좀 더 편리할 수 있다.

$color: orange;

div {
  @if $color == strawberry {
    color: #FE2E2E;
  } @else if $color == orange {
    color: #FE9A2E;
  } @else if $color == banana {
    color: #FFFF00;
  } @else {
    color: #2A1B0A;
  }
}

⬇️
CSS

div {
  color: #FE9A2E;
}
profile
The journey is the reward

0개의 댓글