#20 - 조건문(if)

조건문 (if)

기본 구조

SCSS

if(조건, true표현식, false표현식);

사용 예시

SCSS

$size : 200px;
/* size 값이 100px 보다 크면 size 값을 입력*/
/* size 값이 100px 보다 작으면 값을 넣지 않음*/
.class1{
    width : if($size>100px, $size, null);
}
/* size 값이 300px 보다 크면 size 값을 입력*/
/* size 값이 300px 보다 작으면 값을 넣지 않음*/
.class2{
    width : if($size>300px, $size, null);
}

Compile 된 CSS

/* size값인 200px이 100px보다 크기 때문에, true인 size 200px이 적용 됨 */
.class1{
    width : 200px;
}
/* size값인 200px이 300px보다 작기 때문에, false인 null이 적용 됨 */
.class2{
}

 

---

 

#비교 연산 참고

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

#19 - 논리 / 비교 연산