@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;
}