[SCSS] if(함수) / @if(지시어) if, else if , else

if(함수)

조건의 값 (true, false)에 따라 두 개의 표현식 중 하나만 반환한다.

조건부 삼항 연산자와 비슷하다.

조건? 맞으면 : 틀리면;

↑이게 삼항 연산자이다.

 

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

if에서 함수로

$width가 300px보다 크다면 , width: $width로 들어가고, 아니면 null로 넣겠다.

null은 속성을 사용하지 않는다는 뜻이다.

 

---

@if(지시어)

같이 사용할 수 있는 지시어는 @else , if가 있다.

// @if
@if (조건) {
  /* 조건이 참일 때 구문 */
}

// @if @else
@if (조건) {
  /* 조건이 참일 때 구문 */
} @else {
  /* 조건이 거짓일 때 구문 */
}

// @if @else if
@if (조건1) {
  /* 조건1이 참일 때 구문 */
} @else if (조건2) {
  /* 조건2가 참일 때 구문 */
} @else {
  /* 모두 거짓일 때 구문 */
}

$color가 오렌지 이므로 컬러는 #fe9a2e가 된다.

---

논리연산자 and / or/ not을 사용할 수 있다.

 

unitless는 내장함수인데 px단위가 있냐 없냐를 구분하는 것이고 없을때가 true이다.

없으면 #{$w}를 사용하여 px를 붙이고 있으면 그대로 쓰면 된다는 뜻이다.

그리고 이 부분은 $p가 absolute이나 fixed일때 동작되고 relative나 static일때는 동작이 안되게 하는 설정이다.