SCSS to CSS 컴파일러 완벽 가이드
SCSS(Sassy CSS)는 CSS 전처리기인 Sass의 최신 문법으로, 기존 CSS의 한계를 극복하기 위해 다양한 프로그래밍적 기능을 제공합니다. 변수, 중첩 규칙, 믹스인(Mixin), 상속, 연산 등 강력한 기능을 통해 CSS를 보다 체계적이고 효율적으로 작성할 수 있게 해줍니다. 하지만 브라우저는 SCSS를 직접 해석할 수 없기 때문에 반드시 CSS로 컴파일하는 과정이 필요합니다. 이 도구는 별도의 Node.js나 Ruby 환경 설치 없이 브라우저에서 바로 SCSS를 CSS로 변환할 수 있는 온라인 컴파일러입니다.
본 SCSS to CSS 컴파일러는 순수 JavaScript로 구현되어 있으며, SCSS의 핵심 기능인 중첩 선택자(Nesting), 변수($variable), 부모 참조 연산자(&), 기본 Mixin(@mixin/@include)을 지원합니다. 중첩 선택자를 사용하면 HTML의 DOM 구조를 반영하여 CSS를 작성할 수 있어 코드의 구조를 한눈에 파악할 수 있습니다. 예를 들어 .nav 안에 .nav-item과 .nav-link를 중첩하여 작성하면, 컴파일러가 자동으로 .nav .nav-item, .nav .nav-link와 같은 CSS 선택자를 생성합니다.
변수 기능($variable)을 활용하면 색상, 폰트 크기, 간격 등 반복되는 값을 한 곳에서 관리할 수 있습니다. $primary-color: #4a90e2와 같이 변수를 정의하고, color: $primary-color로 사용하면 나중에 디자인 변경 시 변수값만 수정하면 모든 곳에 일괄 적용됩니다. 부모 참조 연산자(&)는 중첩 규칙 내에서 부모 선택자를 참조할 때 사용됩니다. &:hover, &::before, &.active 같은 의사 클래스, 의사 요소, 조합 선택자를 간편하게 작성할 수 있어 코드 중복을 줄여줍니다.
Mixin은 반복적으로 사용되는 CSS 패턴을 재사용 가능한 블록으로 정의하는 기능입니다. @mixin으로 정의하고 @include로 호출하며, 매개변수를 통해 유연한 스타일 적용이 가능합니다. 예를 들어 미디어 쿼리, flexbox 정렬, 그라디언트 등 자주 사용하는 패턴을 Mixin으로 만들어두면 개발 생산성을 크게 높일 수 있습니다.
이 도구는 구문 하이라이팅 기능을 제공하여 선택자, 속성, 값, 주석 등을 색상으로 구분합니다. 또한 확장(Expanded)과 압축(Compressed) 두 가지 출력 스타일을 지원하며, 들여쓰기도 스페이스 2칸, 4칸, 탭 중에서 선택할 수 있습니다. 모든 컴파일 과정은 사용자의 브라우저에서 실행되므로, 입력한 SCSS 코드가 외부 서버로 전송되지 않아 기밀 프로젝트의 코드도 안심하고 사용할 수 있습니다.
주요 기능 상세 설명
- 중첩 선택자 (Nesting): HTML 구조에 맞춰 CSS 선택자를 중첩하여 작성할 수 있습니다. 자동으로 부모-자식 관계를 반영한 CSS 선택자를 생성합니다.
- 변수 ($variable): 색상, 크기, 간격 등 반복되는 값을 변수로 정의하고 재사용할 수 있습니다. 디자인 시스템 관리에 유용합니다.
- 부모 참조 (&): 중첩 규칙 내에서 부모 선택자를 참조합니다. :hover, ::before, .active 등 의사 클래스와 조합 선택자에 활용됩니다.
- Mixin (@mixin/@include): 재사용 가능한 스타일 블록을 정의하고 호출합니다. 매개변수를 통해 유연한 커스터마이징이 가능합니다.
- 구문 하이라이팅: 선택자(빨간색), 속성(파란색), 값(초록색), 변수(노란색), Mixin(보라색) 등을 색상으로 구분하여 표시합니다.
- 출력 스타일: 읽기 쉬운 확장(Expanded) 모드와 파일 크기를 줄이는 압축(Compressed) 모드를 지원합니다.
자주 묻는 질문 (FAQ)
Q. SCSS와 Sass의 차이점은 무엇인가요?
A. Sass에는 두 가지 문법이 있습니다. 들여쓰기 기반의 원래 Sass 문법(.sass)과 CSS 호환 문법인 SCSS(.scss)입니다. SCSS는 기존 CSS 문법을 그대로 사용할 수 있어 학습 곡선이 낮고, 기존 CSS 파일을 그대로 SCSS로 사용할 수 있다는 장점이 있습니다. 이 도구는 SCSS 문법을 지원합니다.
Q. 이 도구에서 지원하지 않는 SCSS 기능이 있나요?
A. 이 도구는 순수 JavaScript로 구현된 경량 컴파일러로, SCSS의 핵심 기능(중첩, 변수, & 참조, 기본 Mixin)을 지원합니다. @extend, @import, @use, @each, @for 같은 고급 기능이나 복잡한 조건문/반복문은 지원하지 않습니다. 이러한 기능이 필요한 경우 Dart Sass와 같은 전체 컴파일러를 사용하시기 바랍니다.
Q. 입력한 SCSS 코드가 서버로 전송되나요?
A. 아닙니다. 모든 SCSS 컴파일 과정은 사용자의 브라우저 내에서 JavaScript로 실행됩니다. 입력된 코드는 외부 서버로 전송되지 않으므로 기밀 프로젝트의 코드도 안심하고 사용할 수 있습니다. LocalStorage를 활용하여 마지막 입력 내용을 저장하므로 페이지 새로고침 후에도 작업 내용이 유지됩니다.
Q. 컴파일 결과를 실제 프로젝트에 바로 사용할 수 있나요?
A. 네, 컴파일된 CSS 결과는 표준 CSS 문법으로 출력되므로 바로 프로젝트에 적용할 수 있습니다. 프로덕션 환경에서는 압축(Compressed) 출력 스타일을 선택하여 파일 크기를 줄이는 것이 좋습니다. 다만, 대규모 프로젝트에서는 빌드 도구와 Dart Sass를 통한 자동 컴파일 환경을 구축하는 것을 권장합니다.
Q. SCSS 변수와 CSS 변수(Custom Properties)는 어떻게 다른가요?
A. SCSS 변수($variable)는 컴파일 시점에 값으로 대체되어 정적으로 동작하는 반면, CSS 변수(--variable)는 런타임에 동적으로 변경할 수 있습니다. SCSS 변수는 조건문, 반복문 등에서 활용할 수 있고, CSS 변수는 JavaScript로 실시간 변경이 가능합니다. 두 기능은 상호 보완적으로 사용할 수 있습니다.