함수 - 함수 이름 중복, IF 함수

1. 함수 이름 중복

위와 같이 함수는 @include 같은 별도의 지시어 없이 사용하기 때문에 내가 지정한 함수와 내장 함수(Built-in Functions)의 이름이 충돌할 수 있다.
따라서 내가 지정한 함수에는 별도의 접두어를 붙여주는 것이 좋다.

내장 함수란, 응용 프로그램에 내장되어 있으며 최종 사용자가 액세스 할 수 있는 기능이다.
예를 들어, 대부분의 스프레드 시트 응용 프로그램은 행이나 열의 모든 셀을 추가하는 내장 SUM 함수를 지원한다.

예를 들어, 색의 빨강 성분을 가져오는 내장 함수로 이미 red()가 있다.
같은 이름을 사용하여 함수를 정의하면 이름이 충돌하기 때문에 별도의 접두어를 붙여 extract-red() 같은 이름을 만들 수 있다.

// 내가 정의한 함수
@function extract-red($color) {
  // 내장 함수
  @return rgb(red($color), 0, 0);
}

div {
  color: extract-red(#D55A93);
}

혹은 모든 내장 함수의 이름을 다 알고 있을 수 없기 때문에 특별한 이름을 접두어로 사용할 수도 있다.
my-custom-func-red()

 

 

 

2. if (함수)

조건의 값(true, false)에 따라 두 개의 표현식 중 하나만 반환한다.
조건부 삼항 연산자(conditional ternary operator)와 비슷하다.

조건의 값이 true이면 표현식1을,
조건의 값이 false이면 표현식2를 실행한다.

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

 

true인 경우

$width: 555px;
div {
  width: if($width > 300px, $width, null);
}

div {
  width: 555px;
}

 

false인 경우

$width: 200px;
div {
  width: if($width > 300px, $width, null);
}

다음과 같이 null이기 때문에 아무것도 출력이 안된걸 볼 수 있다.