SASS / 문법 / 조건문 - @if, @else if, @else
SASS는 조건문을 지원합니다. 큰 규모의 사이트를 만들 때나 여러 사이트 디자인을 동시에 할 때 유용하게 사용할 수 있습니다.
목차
문법
@if condition1 { A } @else if condition2 { B } @else { C }
condition1을 만족하면 A를, condition1을 만족하지 않고 condition2를 만족하면 B를, condition1과 condition2를 모두 만족하지 않으면 C를 사용합니다. @else if는 여러 번 사용할 수 있습니다.
예제
변수 jb-type의 값에 따라 문단의 색을 다르게 만드는 예제입니다. jb-type의 값이 jb-red이면 빨간색으로, jb-blue이면 파란색으로, jb-red나 jb-blue가 아니면 검정색으로 만듭니다.
$jb-type: jb-blue; p { @if $jb-type == jb-red { color: red; } @else if $jb-type == jb-blue { color: blue; } @else { color: black; } }
다음처럼 코딩해도 결과는 같습니다.
$jb-type: jb-blue; @if $jb-type == jb-red { p { color: red; } } @else if $jb-type == jb-blue { p { color: blue; } } @else { p { color: black; } }