이번 포스팅에서는 SCSS의 함수에 대하여 알아보자.

함수(Functions)

Sass 역시 함수를 정의하여 사용할 수 있습니다.

함수와 Mixins은 거의 유사하지만 반환되는 내용이 다릅니다.

Mixin은 지정한 스타일을 반환하는 반면, 함수는 보통 연산된 특정 값을 @return 지시어를 통해 반환합니다.

// Mixins
@mixin 믹스인이름($매개변수) {
  스타일;
}

// Functions
@function 함수이름($매개변수) {
  @return 값
}

// 사용법
// Mixin
@include 믹스인이름(인수);

// Functions
함수이름(인수)

함수 역시 Mixin과 같이 매개변수에 다양한 값 설정이 가능합니다.

하지만 이와 같은 함수 이름은 @include 같은 별도의 지시어 없이 사용하기 때문에 내가 지정한 함수와 내장 함수(Built-in Functions)의 이름이 충돌할 수 있습니다.

따라서 내가 지정한 커스텀 함수에는 별도의 접두어를 붙여주는 것이 좋습니다.

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

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

참고자료

• https://heropy.blog/2018/01/31/sass/