SASS의 에러 처리

이 글은 SASS에서의 에러 처리 방법을 설명합니다.

SASS의 에러, 경고, 디버그 기능을 사용하여 견고한 스타일 설계를 구축하는 방법을 설명하겠습니다.

YouTube Video

SASS의 에러 처리

SASS에서의 '에러 처리'란 무엇인가요?

SASS는 런타임 예외를 처리하는 언어는 아니지만, 컴파일 시점에서 잘못된 상태를 감지하고 개발자에게 명확하게 알리는 메커니즘을 제공합니다. 이로 인해 잘못된 값이나 설계 실수가 아무도 모르게 CSS로 출력되는 것을 미연에 방지할 수 있습니다.

SASS에서의 에러 처리는 단순히 '문제가 발생했을 때 정지한다'는 것이 아니라 설계의 전제를 코드에 직접 표현하는 방법이기도 합니다. 이를 위해 주로 네 가지 방법이 제공됩니다.

설계상 허용되지 않는 조건이 감지되면 즉시 컴파일을 중단합니다.

문제를 경고로 알리지만, 컴파일 자체는 계속 진행됩니다.

변수와 계산 결과를 출력하여 값의 흐름과 내부 상태를 확인할 수 있도록 돕습니다.

• 가드 조건(@if) 문제가 발생하기 전에 입력 값과 전제 조건을 사전에 확인하여 방지합니다.

@error: 치명적인 오류를 확실하게 정지시킴

설계상 절대로 허용될 수 없는 상태에는 @error를 사용하세요. 잘못된 값이 전달되면 즉시 컴파일이 실패합니다.

1@mixin set-width($width) {
2  @if type-of($width) != number {
3    @error "Width must be a number.";
4  }
5
6  width: $width;
7}

• 이 믹스인은 숫자가 아닌 값이 전달될 경우 빌드를 중단시킵니다. 이것은 의도치 않은 사용을 막기 위한 '최후의 안전 장치'로 매우 효과적입니다.

@error의 실용적 사용 예시(단위 체크 포함)

숫자라 하더라도 잘못된 단위를 사용하면 문제가 될 수 있습니다. SASS에서는 unit()을 사용하여 단위를 검증할 수 있습니다.

1@mixin set-padding($value) {
2  @if unit($value) != "px" {
3    @error "Padding must be specified in px.";
4  }
5
6  padding: $value;
7}

• 이렇게 하면 실수로 1rem이나 %와 같은 값을 넘겨도 바로 감지할 수 있습니다. 설계 규칙을 코드로 강제할 수 있다는 점이 중요합니다.

@warn: 사용 중단 및 경고 알림 용도

@warn은 즉시 문제가 발생하지는 않지만 바람직하지 않은 상태를 알리는 데 사용됩니다. CSS는 여전히 생성되므로 점진적인 이전 작업에 적합합니다.

1@mixin legacy-color($color) {
2  @warn "legacy-color is deprecated. Use theme-color instead.";
3
4  color: $color;
5}

• 이 믹스인은 기존 코드를 깨뜨리지 않고 경고만을 나타냅니다. 대규모 프로젝트의 리팩토링 시 특히 효과적입니다.

조건부 경고를 출력하는 패턴

값의 범위 확인과 함께 사용하면 더 실용적으로 활용할 수 있습니다.

1@mixin set-opacity($value) {
2  @if $value < 0 or $value > 1 {
3    @warn "Opacity should be between 0 and 1.";
4  }
5
6  opacity: $value;
7}

• 개발을 멈추지 않고도 설계상의 오류를 알릴 수 있습니다. @warn의 강점은 '엄격함의 수준'을 선택할 수 있다는 점입니다.

@debug: 값의 흐름 시각화

@debug는 에러 처리라기보다 문제 식별을 위한 관찰 도구 성격이 더 강합니다. 계산 결과와 변수의 내용을 확인할 수 있습니다.

1$base-size: 8px;
2$spacing: $base-size * 3;
3
4@debug $spacing;

• 컴파일 시점에 값이 출력되므로 복잡한 계산 로직 검증에 도움이 됩니다. 운영 코드에는 남겨두지 말고, 조사 용도로만 사용해야 합니다.

@if를 활용한 가드 설계가 가장 중요함

실제로는 @error나 @warn을 사용하기 전에 입력을 사전 검증하도록 설계하는 것이 가장 중요합니다.

1@mixin grid-columns($count) {
2  @if type-of($count) != number or $count <= 0 {
3    @error "Column count must be a positive number.";
4  }
5
6  grid-template-columns: repeat($count, 1fr);
7}

• 이처럼 '올바른 전제 조건'을 명시함으로써 믹스인과 함수가 명확해집니다.

함수 내의 에러 처리(@function)

함수에서도 동일한 방식으로 에러 처리를 할 수 있습니다. 이는 특히 계산 로직에서 중요합니다.

1@function divide($a, $b) {
2  @if $b == 0 {
3    @error "Division by zero is not allowed.";
4  }
5
6  @return $a / $b;
7}

• CSS가 생성되기 전에 잘못된 로직을 감지할 수 있으므로, 설계 시스템의 안정성이 향상됩니다.

실무에서의 사용 가이드라인

마지막으로, 실제 실무에서 선택하기 어려운 부분에 초점을 맞춰 이 기준들의 사용 시점을 정리하겠습니다.

• 설계 위반 또는 버그가 명확히 판단되는 경우 @error 사용. 잘못된 상태에서 CSS를 생성하면 바로 버그로 이어지기 때문에, 컴파일을 즉시 중단합니다.

• 사용 중단 알림이나 단순 경고를 알리고 싶은 경우 @warn 사용. 기존 코드나 마이그레이션 중인 코드를 깨뜨리지 않고, 향후 발생할 수 있는 문제를 알릴 수 있습니다.

• 값의 흐름이나 계산 결과를 확인하고 싶은 경우 @debug 사용. 로직 검증이나 원인 조사 등의 임시 수단으로 효과적입니다.

• 입력값, 사용 조건 등 모든 전제조건을 검증하고 싶은 경우 @if로 가드 처리. 전제 조건을 명확히 표현함으로써, 사전에 문제 발생을 막을 수 있습니다.

SASS는 '거의 뭐든지 쓸 수 있는' 언어이기 때문에, 원하지 않는 상태를 코드 상에서 명확히 정의하는 설계가 장기적으로 더 유지보수성이 높고 오류 발생이 적은 스타일로 이어집니다.

요약

SASS의 에러 처리는 스타일 설계에서의 전제와 규칙을 코드로 명확하게 표현하고 지속적으로 강제하는 메커니즘입니다.

• 에러는 잘못된 상태가 눈치채지지 않고 넘어가는 것을 방지하며, 즉시 확실하게 중지시키기 위해 존재합니다.
• 경고는 즉시 문제를 일으키지 않으면서 앞으로의 변경이나 마이그레이션을 안전하게 할 수 있도록 안내합니다.
• 가드는 사후 대응이 아니라, 아예 문제가 발생하지 않도록 설계하기 위한 것입니다.

이러한 기능을 이해하고 적절하게 사용함으로써, SASS는 단순한 CSS 확장 언어가 아니라 의도와 제약을 명확히 표현할 수 있는 신뢰성 높은 설계 언어가 됩니다.

위의 기사를 보면서 Visual Studio Code를 사용해 우리 유튜브 채널에서 함께 따라할 수 있습니다. 유튜브 채널도 확인해 주세요.

YouTube Video