@function

CSS는 오랫동안 스타일 값을 선언하는 정적인 언어로 인식되어 왔다. 그 안에서 반복되는 패턴이나 디자인 시스템의 일관성을 유지하기 위해 Sass나 CSS-in-JS 같은 추가 도구들을 활용해 왔으며, 최근에는 CSS Custom Properties를 활용하여 값의 재사용을 가능하게 만들고 있었다. 그러나 Custom Properties는 결국 값을 저장하는 수준에 머무르고 있었기 때문에, 여러 요소들이 규칙적인 비율이나 계산 구조를 공유하는 경우에는 복잡한 calc() 표현을 반복해서 작성해야 하는 불편함이 존재했다.

이런 흐름 속에서 등장한 것이 CSS Custom Functions(@function)이다. 이 기능은 CSS 안에서 직접 함수 형태로 값을 계산하고 반환할 수 있는 문법을 제공한다. 이는 CSS가 단순한 스타일 선언 언어에서 벗어나, 디자인 시스템을 구성하는 언어적 도구로 확장되고 있다는 신호라고 볼 수 있다. 즉, 스타일 값을 계산하는 로직을 CSS 자체가 표현할 수 있게 되면서, CSS는 점차 함수형 사고에 가까운 설계 방식을 받아들이고 있다.

예를 들어, 어떤 디자인 시스템에서 여백, 모서리 둥글기, 쉐도우 강도 등이 모두 일정한 scale factor나 spacing rule을 기반으로 계산된다면, 기존 CSS에서는 이를 변수 여러 개로 관리하거나 Sass의 mixin·함수에 의존해야 했다. 그러나 Custom Functions를 사용하면 이러한 규칙을 의미 단위로 추상화하여 하나의 함수로 표현할 수 있다.

@function --scale(--size <length>, --ratio <number>: 1.25) {
  result: calc(var(--size) * var(--ratio));
}
 
.card {
  padding: scale(12px, 1.1);
  border-radius: scale(6px);
}

이 예시에서 볼 수 있듯이, 함수는 값을 직접 반환하며, 반환된 값은 CSS 파서 단계에서 즉시 반영된다. 또한 매개변수에 기본값을 설정할 수 있기 때문에, 재사용성과 유지보수성 측면에서도 유리하다. 이는 지금까지 Sass에서만 가능했던 기능이지만, 중요한 차이는 이 계산이 브라우저 렌더링 시점에서 이루어진다는 점이다.

CSS @function은 스타일 계산을 실시간으로 반영할 수 있다는 점에서 매우 큰 의미를 가진다. 예를 들어, CSS 변수 값이 자바스크립트나 미디어 쿼리 조건에 의해 변경될 때, 이 함수는 해당 값을 그대로 전달받아 새롭게 계산된 스타일을 반영한다. 즉, CSS가 반응형·상태 기반 설계를 더 자연스럽게 다룰 수 있는 언어가 된다는 것이다.

CSS Custom Functions에서는 함수 내부에 지역 변수(local variable)를 선언하고 사용할 수 있다. 이는 기존 CSS Custom Properties가 전역적으로 영향을 미쳤던 것과 달리, 함수 내부에서만 유효한 스코프를 갖는다는 점에서 의미가 있다. 아래 예시를 보면 입력된 반지름 값을 제곱한 뒤 원의 넓이를 계산하는 과정을 함수 내부 변수로 단계적으로 표현하고 있다.

@function --circle-area(--r) {
  --r2: var(--r) * var(--r);
  result: calc(pi * var(--r2));
}

이 방식의 장점은 계산 과정이 한눈에 들어온다는 점이다. 예를 들어, 복잡한 디자인 시스템에서 여백이나 글자 크기, 비율 기반 계산을 수행할 때, 중간 결과를 변수로 저장해두면 가독성과 유지보수성이 크게 개선된다. 즉, CSS가 단순히 최종 스타일 값만 명시하는 언어가 아니라, 계산 과정과 의미를 드러내는 언어로 확장되는 것이라 할 수 있다.

CSS Custom Functions는 함수 내부에서 조건부 규칙, 특히 @media를 사용할 수도 있다. 이를 통해 단순히 값을 계산하는 것을 넘어, 환경에 따라 다른 값을 반환하는 동적 스타일 로직을 표현할 수 있다.

아래의 코드에서 result는 기본적으로 16px을 반환하지만, 뷰포트 너비가 1000px을 초과하면 20px으로 변경된다. 중요한 점은 result가 마지막으로 정의된 값을 반환한다는 규칙이다. 즉, CSS는 함수 내에서도 선언 순서 기반(overriding sequence) 규칙을 그대로 유지한다. 따라서 조건문 아래에 기본 값을 덮어쓰는 형태로 작성하면 의도와 다른 결과가 나올 수 있다.

@function --suitable-font-size() {
  result: 16px;
  @media (width > 1000px) {
    result: 20px;
  }
}
// 미디어 쿼리가 참이면 result는 20px, 아니라면 16px
 
 
@function --suitable-font-size() {
  @media (width > 1000px) {
    result: 20px;
  }
  result: 16px;
}
// 이 경우 언제나 result는 16px
 
 
@function --suitable-font-size() {
  --size: 16px;
  @media (width > 1000px) {
    --size: 20px;
  }
  result: var(--size);
}

아쉽게도 현재 @function은 일부 브라우저에서 실험적으로만 지원되고 있으며, 실제 프로덕션 환경에서 바로 적용하기에는 이르다. 하지만 CSSWG가 이미 “CSS의 재사용 단위를 함수 기반으로 확장한다”는 방향성을 명확히 하고 있다는 점에서, 이 기능은 단순한 실험적 시도가 아니라 CSS가 앞으로 나아갈 방향을 드러내는 신호라고 볼 수 있다.

즉, CSS가 더 이상 반복적인 값 선언의 언어가 아니라, 디자인 시스템의 규칙과 의미를 직접 표현하는 언어로 진화하고 있다는 것이다. 지금 당장 사용할 수는 없어도, 앞으로의 CSS 설계를 생각한다면 @function이 어떤 문제를 해결하고 어떤 방식으로 스타일 구조화를 바꾸게 될지 이해하고 있는 것이 중요하다.

브라우저 별 @function 지원 현황은 caniuse에서 확인해볼 수 있다. 또한 CSS 커스텀 함수 사양은 공식 문서에서 확인해볼 수 있다.