1. if 함수

if 함수 정의

형태는 삼항 연산자와 비슷하다

if(조건식, true일 때 조건, false일 때 조건);

if 함수 예제

형태는 삼항 연산자와 비슷하다

$width: 200px;

.test{
    width: $width;
    height: if($width > 100, 100px, 50px);
}

위 내용이 아래처럼 표현된다.

.test {
  width: 200px;
  height: 100px;
}

2. if 문

if 문 정의

형태는 일반적인 조건문과 비슷하다
() 생략 가능

@if(조건 1){
}
@else if(조건 2){
}
@else{
}

if 문 예제

$width: 200px;

.test{
    width: $width;
    @if($width >= 150){
        height: 100px;
    }
    @else if($width < 150 and $width >= 100){
        height: 50px;
    }
    @else{
        height: $width;
    }
}

위 내용이 아래와 같음

.test {
  width: 200px;
  height: 100px;
}