CSS 텍스트 전처리기 비교

Source: Dev.to

CSS 전처리기란?

CSS 전처리기를 사용하면 다음과 같은 고급 기능을 가진 스타일을 작성할 수 있습니다:

• 변수
• 선택자 중첩
• 믹스인 및 함수
• 코드 모듈화
• 수학 연산

브라우저는 이 코드를 직접 이해하지 못합니다; 먼저 일반 CSS로 컴파일되어야 합니다.

1. Sass (SCSS)

설명

Sass는 가장 많이 사용되는 전처리기로, 전문 프로젝트에서 사실상의 표준입니다. 가장 널리 쓰이는 문법은 SCSS이며, 전통적인 CSS와 매우 유사합니다.

장점

• 광범위한 채택 및 커뮤니티
• 훌륭한 문서화
• 최신 프레임워크와 호환 (Angular, React, Vue)
• 많은 빌드 도구에서 기본 지원
• 명확하고 유지 보수가 쉬운 문법

단점

• 중첩을 과도하게 사용하면 복잡해질 수 있음
• 초보자에게는 중간 정도의 학습 곡선

예시

$primary-color: #3498db;

.button {
  background: $primary-color;

  &:hover {
    background: darken($primary-color, 10%);
  }
}

언제 사용해야 할까

• 중대형 프로젝트
• 팀 단위 작업
• 장기적으로 유지 보수해야 하는 코드

2. Less

설명

Less는 초기에는 매우 인기가 있었으며 Sass보다 간단합니다. Bootstrap은 여러 버전에서 사용했습니다.

장점

• 간단한 문법
• 학습하기 쉬움
• 빠른 컴파일

단점

• 현재 커뮤니티 규모가 작음
• Sass보다 고급 기능이 적음
• 생태계가 쇠퇴 중

예시

@primary-color: #3498db;

.button {
  background: @primary-color;
}

언제 사용하나요

• 작은 프로젝트
• 기존 프로젝트 유지보수
• 간단한 요구사항을 가진 팀

3. Stylus

설명

Stylus는 중괄호와 세미콜론을 없애는 등 매우 유연하고 최소주의적인 문법을 지향합니다.

장점

• 매우 표현력이 풍부함
• 코드가 짧음
• 구문 자유도가 높음

단점

• 대규모 팀에서는 가독성이 떨어짐
• 커뮤니티가 작음
• 코드 스타일 간 일관성 부족

예시

primary-color = #3498db

.button
  background primary-color

언제 사용해야 할까

• 개인 프로젝트
• 표준화보다 속도를 우선시하는 개발자

빠른 비교

2025년에 프리프로세서는 여전히 필요할까?

최근 CSS의 발전으로 이 질문은 더 이상 수사적인 것이 아니다. 오늘날 프리프로세서를 사용하던 과거의 많은 이유가 사라졌거나 크게 약화되었다.

CSS 현대는 이전에 Sass와 같은 도구에서만 존재하던 기능들을 네이티브로 포함하고 있다:

• 범위와 런타임을 가진 네이티브 변수(custom properties)
• calc(), clamp(), min(), max()와 같은 고급 함수 및 color-mix()
• 선택자의 네이티브 중첩
• :has()와 같은 관계형 선택자
• 더 표현력 있는 쿼리(@media, @container)
• if()를 통한 값의 네이티브 조건문(점진적 지원 포함)

네이티브 CSS가 이미 잘 해결하는 문제들

• 재컴파일 없이 테마와 동적 디자인
• 믹스인 없이 복잡한 반응형 디자인
• 상태, 지원 또는 컨텍스트에 기반한 조건 로직
• 변수와 컴포지션을 통한 재사용
• 진정으로 캡슐화된 컴포넌트

올바른 질문은 이제 “CSS와 프리프로세서 중 무엇을 선택할까?”가 아니라:

이 프로젝트가 컴파일 타임 로직이 필요한가, 아니면 런타임 로직이 더 유리한가?

• 답이 런타임, 유연성 및 적응이라면 → 현대 CSS
• 답이 구조, 생성 및 엄격한 제어라면 → Sass