TIL | SCSS Function(함수)

자신의 함수를 정의하여 사용할 수 있다.
Function과 Mixin은 거의 유사하지만 반환되는 내용이 다르다.

Mixin은 지정한 Style을 반환하는 반면,
Function은 보통 연산된 특정 값을 @return 지시어를 통해 반환한다.

// Mixin
@mixin mixinname($매개변수) {
  style;
}

// Function
@function functionname($매개변수) {
  @return 값;
}

사용하는 방법에도 차이가 있다.
Mixin은 @include 지시어를 사용하는 반면,
Function은 함수이름으로 바로 사용한다.

// Mixin
@include mixinname(인수);

// Function
functionname(인수);

SCSS

$max-width: 980px;

@function columns($number: 1, $columns: 12) {
  @return $max-width * ($number / $columns)
}

.box_group {
  width: $max-width;
}

.box1 {
  width: $columns(); // 1
}

.box2 {
  width: columns(8);
}

.box3 {
  width: columns(3);
}

⬇️
CSS

.box_group {
  // 총 너비
  width: 980px;
}

.box_group .box1 {
  // 총 너비의 약 8.3%
  width: 81.66667px;
}

.box_group .box2 {
  // 총 너비의 약 66.7%
  width: 653.33333px;
}

.box_group .box3 {
  // 총 너비의 25%
  width: 245px;
}

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

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

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

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