CSS @function, 스타일시트가 프로그래밍을 배우다
CSS는 오랫동안 "선언적"이라는 정체성에 머물렀다. 변수는 있어도 인자를 받아 계산해 돌려주는 진짜 함수는 없었다. 이제 @function 규칙이 그 빈자리를 메운다. 인자를 받고 타입을 검사하며 결과를 반환하는 사용자 정의 함수가 CSS에 들어온 것이다. Chrome 141이 먼저 구현을 붙였고, 업계는 올해 베이스라인 진입을 점친다. 스타일시트가 프로그래밍 언어의 문법을 흡수하기 시작한 지금, 프론트엔드의 추상화 방식이 흔들린다.
"Custom functions allow authors the same power as custom properties, but parameterized."CSS-Tricks
무슨 일인가
@function은 --my-fn() 같은 대시 함수로 호출하고 result 디스크립터로 값을 반환한다. 인자에 기본값과 타입(<length> 등)을 지정할 수 있고, 내부에서 @media·@supports로 조건 분기까지 가능하다. 다만 한계도 분명하다. 지역 변수·재귀·리스트 인자·조기 반환이 없고, 함수 정의를 바꿔 스타일을 자동 갱신하는 것도 불가능하다. 아직 Chromium 계열 실험 단계라 Firefox·Safari 지원은 진행 중이다.
여러 시각
같은 "프로그래밍되는 CSS" 흐름을 두 자료가 다른 층위에서 본다.
- web.dev —
@property가 베이스라인에 오르며 커스텀 속성에 타입과 애니메이션 가능성을 부여했다. 변수에 "의미"를 입힌 그 흐름의 연장선에@function이 있다. - CSS-Tricks(What's !important #13) —
@function을 "올해 베이스라인에 오를 가장 큰 기능"으로 꼽으면서도,alpha()같은 작은 함수부터 익히며 단계적으로 접근하라고 권한다.
왜 중요한가
그동안 복잡한 계산 로직은 Sass 같은 전처리기나 자바스크립트로 밀어냈다. @function은 그 로직을 런타임 CSS 안으로 되돌린다. 빌드 도구 없이도 유동 타이포그래피, 반응형 그리드, 간격 스케일을 함수 하나로 재사용할 수 있다. 전처리기 의존을 줄이고 디자인 토큰을 더 선언적으로 표현하는 길이 열린다는 뜻이다.
실무 적용
@function은 점진적 향상으로만 도입하고,@supports로 미지원 브라우저용 폴백을 함께 설계한다.- 반복되는
clamp()기반 유동 타이포그래피나 간격 계산을 함수로 추출해 디자인 시스템의 단일 출처로 삼는다. @property로 타입을 지정한 커스텀 속성과@function을 함께 써, 입력 검증과 계산을 CSS 레이어에서 일관되게 처리한다.
Kenny의 관점
프론트엔드 관점에서 @function의 진짜 의미는 "전처리기 탈출"이 아니라 "관심사의 재배치"다. 계산이 빌드 타임에서 런타임으로 내려오면, 컨테이너 크기나 사용자 설정 같은 실시간 맥락에 함수가 반응할 수 있다. 다만 강력함은 남용을 부른다. CSS에 로직이 쌓일수록 디버깅은 어려워진다. 나는 @function을 "토큰을 만드는 작은 순수 함수"로만 제한하고, 분기 로직은 여전히 명시적으로 드러내는 규율을 권한다.
출처
이 글은 아래 원문을 바탕으로 Kenny가 한국어로 요약·정리한 큐레이션입니다.
원문 보기 — CSS-Tricks ↗