[scss] @if

if(삼항 연산자)

if(조건식, 표현식1, 표현식2)

$section-v1: 900px;

.section-v1{
width: $section-v1; background-color: if($section-v1 > 700, coral, orange);
}

/ CSS 컴파일 결과 /
.section-v1{
width:900pxl
background-color:coral;
}

## @if(조건문)
> `@if 지시어`는 자바스크립트의 `if문`과 비슷합니다.
> 같이 사용할 수 있는 지시어로는 `@else`, `@else if`가 있씁니다.
> `@else` 지시어를 붙여 거짓(false)을 반환할 수 있고, `@else if` 지시어를 붙여 `다중 if(조건)문` 실행도 가능합니다.

```scss
//기본 @if 지시문
@if(조건식) {
	//조건이 참일 때 표현식
}

//@if @else문
@if(조건식){ //조건이 참일 때 표현식 }
@else{ //조건이 거짓일 대 표현식 }

//다중 @if문
@if(조건식1){ //조건식1이 참일 때 표현식 }
@else if(조건식2){ //조건식2가 참일 때 표현식 }
@else { //조건식이 모두 거짓일 때 표현식 }

@if(조건문) 문법1

조건식에 ()을 생략하여 작성이 가능합니다

.section-v1{
	width: $section-v1;
    @if $section-v1 >= 700 {
    	background-color:coral;
    }@else{
    	background-color:orange;
    }
}

@if(조건문) 문법2

조건식에 논리 연산자 and, or, not을 사용할 수 있습니다

.section-v1{
	width: $section-v1;
    @if $section-v1 >= 0 and $section-v1 <= 1000 {
    	background-color: coral;
    }@else{
    	background-color: orange;
    }
}