SASS 함수
이 글은 SASS 함수에 대해 설명합니다.
현업에서 유용하게 사용할 수 있는 실전 예제와 함께, SASS 함수의 기초부터 고급 주제까지 자세히 설명합니다.
YouTube Video
SASS 함수
SASS 함수는 스타일시트 내에서 재사용 가능한 로직을 캡슐화하여 계산, 포매팅, 조건 분기 등을 가능하게 해주는 강력한 도구입니다.
함수의 기본 구조와 사용법
SASS 함수는 @function으로 정의하며, @return을 사용하여 값을 반환합니다. 함수는 내장 함수와 같은 방식으로 호출할 수 있습니다.
1// Example: Define a simple function that doubles a value
2@function double($n) {
3 @return $n * 2;
4}
5
6// Use the function
7.example {
8 width: double(10px); // -> 20px
9}- 이 코드는 숫자를 두 배로 만드는 함수를 정의하고 이를 너비에 적용합니다. 결과적으로
.example { width: 20px; }가 생성됩니다.
인수, 기본값, 그리고 타입 처리
함수는 여러 개의 인수를 받을 수 있고, 기본값을 설정할 수 있습니다. SASS는 정적 타입을 강제하지 않지만, 인수의 형식에 유의하면 함수가 더 견고해집니다.
1// Example: Function with default parameters
2@function responsive-font($base-size, $scale: 1.2, $unit: px) {
3 @return $base-size * $scale + $unit;
4}
5
6.title {
7 font-size: responsive-font(16, 1.25); // -> 20px
8}responsive-font함수는scale과unit에 기본값이 있어서, 호출 시 일부 인수를 생략할 수 있습니다. 이 예제에서는font-size: 20px;와 같은 값이 출력됩니다.
가변 인수(...) 사용하기
여러 값을 전달하고 싶을 때는 가변 인수를 사용하세요. 이 방법은 리스트나 여러 색상을 처리할 때 유용합니다.
1// Example: Sum any number of numbers passed in
2@function sum-all($numbers...) {
3 $total: 0;
4 @each $n in $numbers {
5 $total: $total + $n;
6 }
7 @return $total;
8}
9
10.box {
11 padding: sum-all(4px, 6px, 10px); // -> 20px
12}$numbers...같은 가변 인수는 리스트로 간주되어@each로 처리할 수 있습니다. 이 예제에서는padding: 20px;가 출력됩니다.
리스트 또는 맵 반환 및 조작하기
함수는 공백 또는 쉼표로 구분된 리스트와 맵도 반환할 수 있습니다. 이 방법은 복잡한 값을 반환할 때 유용합니다.
1@use "sass:map";
2
3// Example: Return a map of spacing scale
4@function spacing-scale($base) {
5 @return (
6 'small': $base * 0.5,
7 'medium': $base,
8 'large': $base * 2
9 );
10}
11
12$scale: spacing-scale(8px);
13
14.card {
15 margin-bottom: map.get($scale, 'medium');
16}- 함수가 맵(map)을 반환하고, 이후
map.get을 사용하여 값을 가져옵니다. 이를 통해 일관된 간격 시스템을 유지할 수 있습니다.
조건문과 반복문을 가진 함수
함수 내부에서는 @if, @else if, @else, @for, @each, @while 등을 모두 사용할 수 있습니다. 조건문과 반복문을 활용해 계산 로직을 만들 수 있습니다.
1// Example: Generate modular scale value using loop
2@function modular-scale($step, $base: 1rem, $ratio: 1.25) {
3 $result: $base;
4 @if $step == 0 {
5 @return $result;
6 }
7 @if $step > 0 {
8 @for $i from 1 through $step {
9 $result: $result * $ratio;
10 }
11 } @else {
12 @for $i from 1 through abs($step) {
13 $result: $result / $ratio;
14 }
15 }
16 @return $result;
17}
18
19.h1 {
20 font-size: modular-scale(3, 1rem, 1.333);
21}- 이 함수는 모듈러 스케일을 계산하며, 단계가 양수면 곱하고, 음수면 나눕니다.
modular-scale(3, 1rem, 1.333)은 기준값보다 세 단계 위의 폰트 크기를 반환합니다.
에러 처리 및 경고(@error, @warn)
유효하지 않은 인수나 예기치 않은 동작이 있을 때 @error로 중단하거나, @warn으로 경고를 출력할 수 있습니다. 목적은 문제를 조기에 사용자에게 알리는 것입니다.
1@use "sass:math";
2@use "sass:meta";
3
4// Example: Validate input and throw an error for invalid units
5@function ensure-length($value) {
6 @if meta.type-of($value) != 'number' or math.is-unitless($value) {
7 @error "Expected a length with units, got #{$value}.";
8 }
9 @return $value;
10}
11
12// Valid input (should pass)
13.test-valid {
14 width: ensure-length(10px); // expect: 10px
15}
16
17// Invalid input (should throw error during compilation)
18// Uncomment the following to test error handling:
19//
20// .test-invalid {
21// // expect error: "Expected a length with units, got 10."
22// width: ensure-length(10);
23// }- 잘못된 값을 전달하면, 빌드 시 에러가 발생해 원인을 쉽게 파악할 수 있습니다. 함수 내에서 체크를 수행하면 버그를 조기에 발견하는 데 유용합니다.
색상 전용 함수 만들기
SASS에서는 다양한 색상 조작 함수를 결합하여 자신만의 컬러 팔레트를 만들 수 있습니다. 이는 프로젝트 전체에서 일관된 색상 테마를 관리하는 데 유용합니다.
1@use "sass:color";
2@use "sass:list";
3
4// Example: Generate a color palette (tints and shades) from a base color
5@function palette($color, $steps: 5, $strength: 10%) {
6 $colors: ();
7 @for $i from 0 through $steps {
8 $amount: $i * $strength;
9 $shade: if($i == 0, $color, color.mix(black, $color, $amount));
10 $tint: color.mix(white, $color, $amount);
11 $colors: list.append($colors, $shade);
12 $colors: list.append($colors, $tint);
13 }
14 @return $colors;
15}
16
17$palette: palette(#3498db, 3, 15%);
18
19.btn {
20 background-color: list.nth($palette, 1);
21}- 이 예제에서는
color.mix를 사용하여 검정과 섞어 명암을, 흰색과 섞어 색조를 만듭니다. 값들은 리스트로 반환되며,list.nth로 접근할 수 있습니다.
성능 및 컴파일 시간 주의사항
SASS 함수는 컴파일 타임에 평가됩니다. 복잡한 반복문, 깊은 재귀, 대규모 맵 처리 등은 컴파일 시간을 증가시킵니다. 함수는 작고 단순하게 유지하며, 복잡한 처리가 필요하다면 SASS 외부의 빌드 도구나 전처리기에서 처리하는 것을 고려하세요.
실전 유틸리티 함수 모음
여기 자주 사용하는 유틸리티 함수들을 모았습니다. 코드는 실제 프로젝트에서 바로 사용할 수 있도록 설계되었습니다.
1@use "sass:math";
2
3// Example: Clamp a value between min and max
4@function clamp-value($value, $min, $max) {
5 @if $value < $min {
6 @return $min;
7 } @else if $value > $max {
8 @return $max;
9 }
10 @return $value;
11}
12
13// Example: Convert px to rem (with optional root size)
14@function px-to-rem($px, $root: 16px) {
15 @if math.unit($px) != "px" {
16 @error "px-to-rem requires a px value.";
17 }
18 @return ($px / $root) * 1rem;
19}clamp-value는 값의 상한과 하한을 제한하고,px-to-rem은 픽셀 값을 rem으로 변환합니다. 이 두 함수 모두 반응형 디자인에서 자주 발생하는 작업을 간편하게 해줍니다.
@function과 믹스인(@mixin)의 선택
함수는 값을 반환하는 데 특화되어 있고, 믹스인은 CSS 블록을 출력합니다. 로직의 결과가 단일 속성 값이면 함수, 전체 스타일 블록이면 믹스인을 사용합니다.
1// Example: Function returns a value
2@function border-radius-value($size) {
3 @return $size * 1px;
4}
5
6// Example: Mixin outputs properties
7@mixin rounded($size) {
8 border-radius: border-radius-value($size);
9 -webkit-border-radius: border-radius-value($size);
10}
11.card {
12 @include rounded(8);
13}- 함수는 숫자나 색상 같이 속성에 사용할 값을 반환하고, 믹스인은 여러 속성을 묶어 직접 삽입합니다. 역할을 엄격하게 분리하면 유지 보수성이 향상됩니다.
문자열 처리와 출력 형식 주의사항
SASS에서 단위가 있는 숫자와 문자열을 다룰 때 주의하세요. 단위를 가진 숫자와 문자열을 연결하면 원치 않는 출력이 발생할 수 있습니다. 필요에 따라 unquote()나 문자열 인터폴레이션(#{})을 사용하세요.
1@use "sass:math";
2
3// Example: Safely create a CSS value string
4@function px-percentage($px, $total) {
5 $percent: math.div($px, $total) * 100;
6 @return "#{$percent}%";
7}
8
9// Safer with interpolation and math module
10@function px-percentage-safe($px, $total) {
11 $percent: math.div($px, $total) * 100;
12 // Round to 2 decimal places safely
13 $rounded: math.div(math.round($percent * 100), 100);
14 @return "#{$rounded}%";
15}- 문자열로 %를 반환할 때는 인터폴레이션이나
round를 활용해 정밀도를 명확히 관리하세요. 버그를 막으려면, 계산 결과를 문자열과 결합할 때 항상 데이터 타입을 명확히 처리하세요.
테스트 및 문서화 모범 사례
함수를 작성한 뒤, 사용 예제를 포함한 작은 SCSS 파일로 테스트를 만들어두면 유지 보수가 쉬워집니다. 각 함수마다 입력 타입/단위, 반환 타입, 실패 시 동작, 사용 예시 등을 문서화할 수 있습니다.
1@use "sass:math";
2
3// Example: Inline "tests" (partial usage examples)
4// These can be compiled separately during development
5
6@function double($n) {
7 @return $n * 2;
8}
9
10@function px-to-rem($px, $root: 16px) {
11 @if math.unit($px) != "px" {
12 @error "px-to-rem requires a px value.";
13 }
14 @return math.div($px, $root) * 1rem;
15}
16
17// Test double()
18.test-double {
19 width: double(12px); // expect 24px
20}
21
22// Test px-to-rem()
23.test-rem {
24 font-size: px-to-rem(18px, 18px); // expect 1rem
25}
26
27// --- Inline debug tests ---
28@debug "double(12px) => #{double(12px)} (expect 24px)";
29@debug "px-to-rem(18px, 18px) => #{px-to-rem(18px, 18px)} (expect 1rem)";- '예상 출력'이 담긴 간단한 예시를 주석으로 남겨두면 이후 리팩토링에서 문제를 더 쉽게 발견할 수 있습니다. CI 환경에서 자동으로 컴파일하고 출력을 시각적으로 확인하는 것도 효과적입니다.
요약
SASS 함수는 스타일의 재사용성과 일관성을 높이는 강력한 방법입니다. 함수는 작고 단순하게 설계하고, @error와 @warn으로 안전성을 확보하세요. 색상, 간격, 단위 변환 등의 유틸리티 함수는 공용 라이브러리로 모아두면 편리합니다. 컴파일 오버헤드를 줄이기 위해, 필요시 복잡한 처리는 다른 빌드 단계로 분리하는 것도 고려하세요.
위의 기사를 보면서 Visual Studio Code를 사용해 우리 유튜브 채널에서 함께 따라할 수 있습니다. 유튜브 채널도 확인해 주세요.