#21 - 조건문 (@if)

조건문 (@if)

사용 예시 1

SCSS 기본 구조

@if (조건) {
  조건이 참일 때 동작
}

SCSS

$box-size : 500px;

.class{
    @if ($box-size == 500px) {
      background-color : red;
    }
}

Compile 된 CSS

.class{
  background-color : red;
}

 

 

---

사용 예시 2

SCSS 기본 구조

@if (조건) {
  조건이 참일 때 동작
} @else {
  조건이 거짓일 때 동작
}

SCSS

$box-size : 500px;

.class{
    @if ($box-size > 800px) {
      background-color : red;
    } @else {
      background-color : yellow;
    }
}

Compile 된 CSS

.class{
  background-color : yellow;
}

 

---

사용 예시 3

SCSS 기본 구조

@if (조건1) {
  조건1이 참일 때
} @else if (조건2) {
      조건2가 참일 때 동작
} @else if (조건4) {
      조건2가 참일 때 동작
} @else {
      모두 거짓일 때 동작
}

SCSS

$box-size : 500px;

.class{
    @if ($box-size > 800px) {
      background-color : red;
    } @else if ($box-size > 600px)  {
      background-color : yellow;
    } @else if ($box-size > 400px)  {
      background-color : orange;
    } @else {
      background-color : black;
    }
}

Compile 된 CSS

.class{
  background-color : orange;
}

 

---

 

#비교 연산 참고

https://rosakim90.tistory.com/entry/10-%EC%A1%B0%EA%B1%B4%EB%AC%B8

#19 - 논리 / 비교 연산