@function: Sass 값 계산 함수 만들기

함수는 SassScript 값에 대한 복잡한 연산을 정의해서 스타일시트 곳곳에서 재사용하게 해 줘요. 공통된 공식이나 동작을 읽기 쉽게 추상화하기 좋습니다. 정의는 @function, 값을 돌려줄 때는 @return 규칙을 써요.

출처: Sass: @function (공식 문서)

기본 사용

함수는 @function <이름>(<인자...>) { ... } 형태로 정의해요. 이름은 --로 시작하지 않는 어떤 Sass 식별자든 쓸 수 있어요. 함수 본문에는 유니버설 문장과, 함수 호출의 결과로 쓸 값을 가리키는 @return 규칙만 담을 수 있습니다. 함수 호출은 일반 CSS 함수 문법 그대로 해요.

@function fibonacci($n) {
  $sequence: 0 1;
  @for $_ from 1 through $n {
    $new: nth($sequence, length($sequence)) + nth($sequence, length($sequence) - 1);
    $sequence: append($sequence, $new);
  }
  @return nth($sequence, length($sequence));
}

.sidebar {
  float: left;
  margin-left: fibonacci(4) * 1px;
}

.sidebar {
  float: left;
  margin-left: 5px;
}

함수 이름도 모든 Sass 식별자처럼 하이픈과 밑줄을 똑같이 취급해요. scale-color과 scale_color는 같은 함수를 가리킵니다.

기술적으로 함수는 전역 변수 설정 같은 부수 효과(side-effect)를 가질 수도 있지만, 이는 강력히 권장되지 않아요. 부수 효과가 필요하면 믹스인을 쓰고, 함수는 값 계산에만 쓰는 게 좋습니다.

인자(Arguments)

인자는 함수의 동작을 호출할 때마다 다르게 만들어 줍니다. @function 규칙에서 함수 이름 뒤 괄호에 변수 이름 목록으로 지정하고, 함수는 같은 개수의 SassScript 표현식 인자와 함께 호출되어야 해요. 인자 값은 함수 본문에서 대응하는 변수로 사용됩니다. 인자 목록은 뒤에 쉼표가 와도 됩니다.

선택적 인자

함수가 선언한 인자는 보통 전부 넘겨야 해요. 하지만 기본값을 정의하면 인자를 선택적으로 만들 수 있어요. 기본값은 변수 선언과 같은 문법, 변수 이름 뒤 콜론과 표현식으로 씁니다.

@function invert($color, $amount: 100%) {
  $inverse: change-color($color, $hue: hue($color) + 180);
  @return mix($inverse, $color, $amount);
}

$primary-color: #036;
.header {
  background-color: invert($primary-color, 80%);
}

.header {
  background-color: rgb(32%, 20%, 8%);
}

기본값은 어떤 SassScript 표현식이든 될 수 있고, 앞선 인자를 참조할 수도 있어요.

키워드 인자

함수를 호출할 때 인자는 위치가 아니라 이름으로도 넘길 수 있어요. 선택적 인자가 여러 개인 함수나 이름 없이는 뜻이 잘 안 드러나는 불리언 인자에서 특히 유용합니다. 키워드 인자는 변수 선언·선택적 인자와 같은 문법을 써요.

$primary-color: #036;
.banner {
  background-color: $primary-color;
  color: scale-color($primary-color, $lightness: +40%);
}

.banner {
  background-color: #036;
  color: rgb(4%, 52%, 100%);
}

어떤 인자든 이름으로 넘길 수 있으니, 함수 인자 이름을 바꿀 때는 사용자가 깨질 수 있어 조심해야 해요. 옛 이름을 한동안 선택적 인자로 남겨 두고, 넘기면 경고를 띄우는 것도 도움이 됩니다.

임의의 인자 받기

함수가 몇 개든 인자를 받아야 할 때가 있어요. @function 선언의 마지막 인자가 ...로 끝나면, 그 함수로 넘어온 모든 추가 인자가 리스트로 그 인자에 전달됩니다. 이 인자를 인자 리스트(argument list)라고 해요.

@function sum($numbers...) {
  $sum: 0;
  @each $number in $numbers {
    $sum: $sum + $number;
  }
  @return $sum;
}

.micro {
  width: sum(50px, 30px, 100px);
}

.micro {
  width: 180px;
}

인자 리스트는 추가 키워드 인자도 받을 수 있어요. meta.keywords() 함수가 인자 리스트를 받아, 믹스인/함수로 넘어온 추가 키워드를 인자 이름(맵의 키, $ 제외)과 그 값으로 가진 맵을 돌려줍니다.

인자 넘겨주기

인자 리스트가 함수가 임의의 위치/키워드 인자를 받게 해 주는 것처럼, 같은 문법으로 위치/키워드 인자를 넘길 수도 있어요. 함수 호출의 마지막 인자로 리스트 다음에 ...를 붙이면 그 요소들이 추가 위치 인자로 취급되고, 맵 다음에 ...를 붙이면 추가 키워드 인자로 취급됩니다. 둘을 동시에 넘길 수도 있어요.

$widths: 50px, 30px, 100px;
.micro {
  width: min($widths...);
}

.micro {
  width: 30px;
}

인자 리스트는 위치 인자와 키워드 인자를 둘 다 기억하므로, 이 둘을 한꺼번에 다른 함수로 넘기는 데 쓸 수 있어요. 함수의 별칭(alias)을 정의하기가 아주 쉬워집니다.

@return

@return 규칙은 함수를 호출한 결과로 쓸 값을 가리켜요. @function 본문 안에서만 쓸 수 있고, 각 @function은 반드시 @return으로 끝나야 합니다.

@return을 만나면 함수는 즉시 끝나고 그 결과를 돌려줍니다. 이른 반환(early return)은 엣지 케이스를 다루거나 더 효율적인 알고리즘을 쓸 수 있을 때, 함수 전체를 @else 블록으로 감싸지 않고 처리하기 좋아요.

@use "sass:string";

@function str-insert($string, $insert, $index) {
  // Avoid making new strings if we don't need to.
  @if string.length($string) == 0 {
    @return $insert;
  }

  $before: string.slice($string, 0, $index);
  $after: string.slice($string, $index);
  @return $before + $insert + $after;
}

그 밖의 함수

사용자 정의 함수 말고도 Sass는 언제나 쓸 수 있는 상당한 핵심 라이브러리의 내장 함수를 제공해요. Sass 구현체는 호스트 언어에서 커스텀 함수를 정의하게도 합니다. 그리고 당연히 일반 CSS 함수는 언제든 호출할 수 있어요.

일반 CSS 함수

사용자 정의 함수도 내장 함수도 아닌 함수 호출은 그대로 일반 CSS 함수로 컴파일됩니다. 인자는 CSS로 컴파일되어 함수 호출 안에 그대로 들어가요. 덕분에 Sass는 새 CSS 함수가 추가될 때마다 새 버전을 내지 않아도 모든 CSS 함수를 지원할 수 있어요.

@debug var(--main-bg-color); // var(--main-bg-color)

$primary: #f2ece4;
$accent: #e1d7d2;
@debug radial-gradient($primary, $accent); // radial-gradient(#f2ece4, #e1d7d2)

알 수 없는 함수는 전부 CSS로 컴파일되기 때문에, 함수 이름을 오타 내도 발견하기 어려워요. 스타일시트 출력에 CSS 린터를 돌려 그런 경우를 잡아내는 걸 고려해 보세요.

@function: Sass 값 계산 함수 만들기